[SOLVED] Using gradient on div border with rounded corners

Using gradient on div border with rounded corners

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?

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