Using gradient on div border with rounded corners

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?

If you're looking for a cross browser solution for this I'd suggest using nested divs as detailed in this answer: http://stackoverflow.com/a/7066176/524555 — methodofaction, Jul 10 '13 at 01:28
@Duopixel Awesome. That'll do it! I can't believe I missed that question. I searched for an hour! If you put yours as an answer then I will check as such. — HighHopes, Jul 10 '13 at 14:15
CSS gradients and CSS border-radius should work just fine together. For modern browsers you shouldn't have any issues with what you've described. If you're specifically having problems with IE9, there are known bugs with the `filter` style that doesn't work well with `border-radius`. This can be resolved using [CSS3Pie](http://css3pie.com/). — Spudley, Jul 23 '13 at 16:29

score 7 · Answer 1 · answered May 27 '20 at 19:15

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;
}

score 4 · Accepted Answer · edited May 23 '17 at 10:29

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

score 2 · Answer 3 · answered Nov 25 '14 at 11:34

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/

score 1 · Answer 4 · answered Dec 14 '17 at 12:28

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/

score 0 · Answer 5 · answered Dec 16 '22 at 12:14

0

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 ^

answered Dec 16 '22 at 12:14

Sushan Yadav

111
2
4

Using gradient on div border with rounded corners

5 Answers5