Using gradient on div border with rounded corners

css, html

Solution

You can nest two elements and let the outer `div` act as the gradient border then you can work around this problem, example:

<div class="container">
  <div class="content">
    ...
  </div>
</div>

And then in your CSS:

/* 
   unprefixed for conciseness, use a gradient generator por production code 
*/

.container { 
   background: linear-gradient(red, black);
 }

.content   { 
   background: white; 
   padding: 10px;
 }

For a working example take a look at https://stackoverflow.com/a/7066176/524555

Problem

I have some divs that have rounded corners and colored borders. I want the borders of the div to have the gradient so that it will change when the user hovers overs the div. I have found all of the sites on how to use the gradient (http://css-tricks.com/css3-gradients/, http://gradients.glrzad.com/, etc.) but I still can't figure out how to get this to work for rounded edge borders. Will someone please guide me to a site that describes how to do this or even help me with the code?

Original source

Related problems