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 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>
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>
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>
left border gradient fill with border radius
This is not how you will get gradient border, to get a gradient border, you will have to give a background gradient to parent element.Now if you want to get left border as gradient then give padding left to parent element and in similar fashion you can give padding to other sides as well.
I did not touch other parts of your css declaration, just removed the border and added a padding and background color.
.test{width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
overflow:hidden;
font-family:"Lato",sans-serif;
font-size:16px;
line-height:1;originally 1.5 #9970e0
color:#555555;
margin: 15px;
background: linear-gradient(to bottom,#cc0099,#0099ff);
border-right:0px;
padding: 0 0 0 5px;
}
.inherit{
width: 100%;
padding: 0 0 0 1px;
background: #fff;
}
<div class="test">
<div class="inherit">
Inherit
</div>
</div>
Related Topics
Difference Between "Word-Break: Break-All" Versus "Word-Wrap: Break-Word" in Css
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
Add Bootstrap Glyphicon to Input Box
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
How to Hover Over One Element and Affect a Different Element
Css @Media Print Issues With Background-Color;
How to Make a Floated Div 100% Height of Its Parent
Difference Between Margin and Padding
Remove Ie10'S "Clear Field" X Button on Certain Inputs
Is the CSS Star Selector Considered Harmful (And Why)
Font Awesome 5, Why Is CSS Content Not Showing
How to Define Colors as Variables in Css
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)