How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

achieving rounded corners for button with border-image-source is linear gradient

You can apply the gradient as the main background then use a pseudo element above it to hide it and keep only the border part visible:

.card-approve-btn {  position: relative;  display:inline-block;  background-image: linear-gradient(291deg, #ffb37c, #f9514f);  padding:0 20px;  line-height:30px;  text-align: center;  color: #485564;  border-radius: 6px;  overflow: hidden;  font-size: 14px;  font-weight: 600;  z-index:0;}
.card-approve-btn:before {  content: '';  position: absolute;  /* specify the value of border width here */  top: 1px;  right: 1px;  bottom: 1px;  left: 1px;  /* --- */  background-color: #fff;  border-radius: 5px;  box-sizing: border-box;  z-index: -1;}

<div class="card-approve-btn">  Approve</div>

Using gradient on div border with rounded corners

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

Border Gradient with Border Radius

2021: I recommend using the CSS mask method since the support is pretty good now

---

You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

Transparent rounded button with gradient border

Considering the fact that you will have an horizontal gradient with 1px border we can simulate this by creating a multiple background layer. The left and right border can be considered as a solid color (since it's an horizontal gradient) and only the top/bottom need to really be gradient.

The tricky part is to find the percentage value for the top gradient in order to have the transparent gap and keep it the same as the bottom one. For this I used some math to find the correct values.

I made the border 2px to better see the result

body {  font-family: sans-serif;  background-color: #232837;}
.button {  cursor: pointer;  display: inline-block;  height: 40px;  line-height: 40px;  padding: 0 10px;  color: white;  border:2px solid transparent;  border-radius:10px;  border-right-color:#743ad5;  border-left-color:#d53a9d;  background:    linear-gradient(to left,      rgb(116, 58, 213) 0%, rgb(186, 58, 143) 70% ,      transparent 70%,  transparent 85%,       rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,    linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;  background-repeat:no-repeat;}

<a class="button">This is a button</a><a class="button">This is a long button</a><a class="button" style="padding:10px">This is a very long button</a>

linear-gradient with a border-radius at certain percentages

This snippet puts the red background onto the after pseudo element which is given 30% of the overall height of the body and has the two bottom corners rounded.

The before pseudo element is given the blue background.

body {
  --blue: blue;
  --red: red;
  height: 100vh;
  width: 100vw;
}

body::before,
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

body::before {
  background-color: blue;
  height: 100%;
}

body::after {
  height: 30%;
  background-color: var(--red);
  border-radius: 0 0 20px 20px;
}

<body></body>

How create element div top vertical with border radius and background linear gradient

You'll need 2 divs for this, with 1 nested in the other.

Rotate the child element using transform: rotate(deg) and hide the overflowing sides by applying overflow:hidden to the parent.

.parent {
  background-color: #E6E6E6;
  width: 200px;
  height: 200px;
  overflow: hidden;
  padding-top: 8px;
}

.child {
  height: 222px;
  width: 217px;
  margin-left: -10px;
  background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
  border-radius: 25px 25px 0px 0px;
  transform: rotate( -6deg);
}

<div class="parent">
  <div class="child">

  </div>
</div>

---

Related Topics