CODEWITHSUNDEEP
csshtml
HighHopes
HighHopes

Reputation: 2102

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?

Upvotes: 12

Views: 27586

Answers (5)

Walter Schwarz
Walter Schwarz

Reputation: 153

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/

Upvotes: 2

innovThemes
innovThemes

Reputation: 171

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

Upvotes: 12

Raphael Aleixo
Raphael Aleixo

Reputation: 607

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/

Upvotes: 2

methodofaction
methodofaction

Reputation: 72395

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

Upvotes: 5

Sushan Yadav
Sushan Yadav

Reputation: 131

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 ^

Upvotes: 0

Related Questions