Using gradient on div border with rounded corners - css

Question

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?

Answer 1

Here is the SIMPLE solution for that :
Outcome : CSS rounded corners with gradient border
.yourClass {
display: inline-flex;
border: double 6px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
background-origin: border-box;
background-clip: content-box, border-box;
}

Answer 2

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

Answer 3

Using a :before element is the most ideal solution in my opinion, as you then have full control via CSS and the HTML markup stays clean.
.circle {
width: 300px;
height: 200px;
background: white;
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
width: 100%;
height:100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}
You can tweak the padding and the top and left values to adjust the border thickness.
Here is a JSFiddle that shows a practival example: http://jsfiddle.net/wschwarz/e2ckdp2v/

Answer 4

I know this answer was already answered and accepted, but I wanted to post a different approach I used, because this accepted answer wouldn't work if the button was over a background with another gradient, or an image, for example.
My solution works only for horizontal gradients and rounded-cornered (but not circle) buttons. I used both the "border-image" property and pseudo-elements to achieve this effect:
The button would have only the top and bottom "border-image" borders. The left and right borders would be completed with pseudo-elements.
Here's a working example:
HTML:
<div class="background">
<button class="button">
My button!
</button>
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.background {
background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
width:500px;
height:500px;
display:flex;
align-items:center;
justify-content:center;
}
.button {
box-sizing:border-box;
display: inline-block;
padding:0.5em 0;
background:none;
border:none;
border-top:2px solid #0498f8;
border-bottom:2px solid #0498f8;
border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
border-image-slice: 1;
position: relative;
text-transform: lowercase;
transition:background 0.3s;
color: #fff;
cursor: pointer;
font-size:1em;
&:before,
&:after {
content: '';
display: block;
width: 2em;
height: calc(100% + 4px);
border-radius: 3em 0 0 3em;
border: 2px solid #0498f8;
position: absolute;
border-right: none;
transition:background 0.3s;
left: -2em;
top: -2px;
}
&:after {
border-radius: 0 3em 3em 0;
border: 2px solid #4db848;
position: absolute;
border-left: none;
left:auto;
right: -2em;
top: -2px;
}
&:hover {
background:rgba(0,0,0,0.3);
&:after,
&:before {
background:rgba(0,0,0,0.3);
}
}
}
https://jsfiddle.net/fnbq92sc/2/

Answer 5

border="solid 1px transparent"
background="linear-gradient(Canvas, Canvas) padding-box, linear-gradient(red, blue) border-box"
borderRadius="1rem"
second part for background is the gradient you desire ^