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.
border-radius with border-image
It is not possible to combine them. The W3 Spec says:
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.
However, you can achieve the same effect by using a css gradient
#cont{ background: -webkit-linear-gradient(left top, crimson 0%, blue 100%); width: 300px; height: 300px; border-radius: 1000px; padding: 10px;}
#box{ background: white; width: 300px; height: 300px; border-radius: 1000px;}
<div id="cont"> <div id="box"></div></div>
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>
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>
border-radius not working with border-image output
This won't work with border-image. The radius is being applied to the object however the border-image with a gradient will not be respected.
Based on what you what, I've created a fiddle here https://jsfiddle.net/a9dpg582/1/ I think this is what you're after.
#progress {
pointer-events: none;
position: relative;
}
#progress .spinner-icon::after {
content: '';
border-radius: 50%;
background-color: #FFF;
width: 26px;
height: 26px;
position: absolute;
left: 2px;
top: 2px;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display: block;
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
}
#progress {
position: absolute;
border-radius: 50%;
}
@-webkit-keyframes progress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes progress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Animated SVG border-image not honoring border-radius
I know this is kind of cheating, but if you could have nested elements then the parent could have a background and the child could mask of the background with a color:
div.wrapper {
width: 300px;
height: 200px;
border-radius: 10px;
padding: 5px;
background-image: url(https://www.public.asu.edu/~madaley1/images/borderAnimation.svg);
display: flex;
align-items: center;
justify-content: center;
}
div.wrapper>div {
width: 100%;
height: 100%;
border-radius: 5px;
box-sizing: border-box;
background: white;
}
<div class="wrapper">
<div></div>
</div>
Gradient border with border radius and gradient text
I will consider this previous answer to build the rounded gradient using pseudo element so that you can use background-clip:text
on the main element. I have used the mask version by you can also consider the SVG one:
.btn {
--r:40px; /* radius */
--b:5px; /* border width */
background: linear-gradient(to right, #006175 0%, #00a950 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
border-radius: var(--r);
display: flex;
align-items: center;
justify-content: center;
font: 1.5rem 'Oswald', Arial, sans-serif;
height: 80px;
margin: 0 auto;
position: relative;
z-index:0;
text-decoration: none;
width: 264px;
}
/* check lined question for the detail of the below code */
.btn::before {
content:"";
position:absolute;
z-index:-1;
inset: 0;
border: var(--b) solid transparent;
border-radius: var(--r);
background: inherit;
background-origin: border-box;
background-clip: border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
-webkit-mask-repeat: no-repeat;
}
/**/
.btn:hover {
color: #fff;
-webkit-text-fill-color: #fff;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.btn:hover::before {
-webkit-mask:none;
}
body {
background:pink;
}
<a class="btn" href="#">
Click Here!
</a>
Related Topics
CSS Is Not Loaded at All in Internet Explorer (Sec7113)
How to Create Vertical Text Using Only CSS
Preventing Horizontal Scrolling in Mobile Devices
Ie Flexible Box Model Not Working
Want to Make the Whole Page in Grayscale Except Specified Div
Width Transitioning from Fixed Size to "Auto" Using CSS Without JavaScript
Primefaces 5 Rotated Axis Tick Labels
Hover Property in CSS Doesn't Work When I Have an Inline Styles
Differencebetween CSS and SCSS
Bootstrap Fullscreen Layout with 100% Height
How to Allow Flex-Items to Grow While Keeping the Same Size
Scss/Sass Multiple Sites in Multiple Directories
Two Column Layout with One Having a Fixed Width in CSS
CSS Attribute Selector: Apply Class If Custom Attribute Has Value? Also, Will It Work in IE7+