I have the following CSS:-
a.btn.white-grad {
background: $lgrey;
color: #313149 !important;
border: 1px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
border-image-slice: 20;
float: left;
@include font-size(26);
margin: 75px 0;
}
Adding border-radius: 5px doesn't seem to do anything, I figured it's because I'm using border gradient, is there a way for me to achieve the desired 5px border radius at all?
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,#ccc) 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>If you want transparency, you can consider SVG like below:
svg {
width:200px;
height:100px;
margin:10px;
}<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#9c20aa" offset="0"/>
<stop stop-color="#fb3570" offset="1"/>
</linearGradient>
</defs>
<rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>That you can apply as background:
.white-grad {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
color: #313149;
padding:25px;
border-radius:15px;
display:inline-block;
margin: 75px 0;
}
body {
background:yellow;
}<div class="white-grad"> Some text here</div>
<div class="white-grad"> text very loooooooooooong here</div>The above seems to work fine only on Chrome due to the support of calc(). We can adjust the code slightly to make it working on Firefox:
svg {
width:200px;
height:100px;
margin:10px;
overflow:visible;
}<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#9c20aa" offset="0"/>
<stop stop-color="#fb3570" offset="1"/>
</linearGradient>
</defs>
<rect x="5" y="5" height="100%" width="100%" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>And the background version (a bit hacky, I don't recommend)
.white-grad {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" rx="20" ry="20" transform="scale(0.93,0.88)" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
color: #313149;
padding:25px;
border-radius:15px;
display:inline-block;
margin: 75px 0;
}
body {
background:yellow;
}<div class="white-grad"> Some text here</div>
<div class="white-grad"> text very loooooooooooong here</div>You can also use it as common element and consider position:absolute to place it around the text:
.white-grad {
color: #313149;
padding: 25px;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad > svg {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
body {
background: yellow;
}
.hide {
height:0;
width:0;
}<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" rx="20" ry="20" transform="scale(0.93,0.88)" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
Some text here</div>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
text very loooooooooooong here</div>Here is a different and complex idea with CSS using mask where you will have transparency and it will also be responsive:
.white-grad {
color: #313149;
padding: 10px;
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border: 5px solid transparent;
border-radius: 15px;
background: linear-gradient(to right, #9c20aa, #fb3570) border-box;
-webkit-mask:
radial-gradient(circle at bottom left ,transparent 9px,#fff 11px) top right/15px 15px no-repeat,
radial-gradient(circle at top right ,transparent 9px,#fff 11px) bottom left/15px 15px no-repeat,
radial-gradient(circle at top left ,transparent 9px,#fff 11px) bottom right/15px 15px no-repeat,
radial-gradient(circle at bottom right,transparent 9px,#fff 11px) top left/15px 15px no-repeat,
linear-gradient(to bottom,#fff 5px,transparent 5px) top /100% 50% no-repeat,
linear-gradient(to top ,#fff 5px,transparent 5px) bottom/100% 50% no-repeat,
linear-gradient(to right ,#fff 5px,transparent 5px) left /50% 100% no-repeat,
linear-gradient(to left ,#fff 5px,transparent 5px) right /50% 100% no-repeat;
mask:
radial-gradient(circle at bottom left ,transparent 9px,#fff 11px) top right/15px 15px no-repeat,
radial-gradient(circle at top right ,transparent 9px,#fff 11px) bottom left/15px 15px no-repeat,
radial-gradient(circle at top left ,transparent 9px,#fff 11px) bottom right/15px 15px no-repeat,
radial-gradient(circle at bottom right,transparent 9px,#fff 11px) top left/15px 15px no-repeat,
linear-gradient(to bottom,#fff 5px,transparent 5px) top /100% 50% no-repeat,
linear-gradient(to top ,#fff 5px,transparent 5px) bottom/100% 50% no-repeat,
linear-gradient(to right ,#fff 5px,transparent 5px) left /50% 100% no-repeat,
linear-gradient(to left ,#fff 5px,transparent 5px) right /50% 100% no-repeat;
}<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>You need to wrap the button in a div and set the border-radius on that parent div. In order to work, you will have to set overflow:hidden to that parent div as well. Like so:
.btn-wrap {
border-radius: 5px;
overflow: hidden;
margin: 20px;
width: 60px;
}
a.btn.white-grad {
background: #eee;
color: #313149 !important;
border: 20px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
border-image-slice: 20;
line-height: 2;
} <div class="btn-wrap">
<a href="#" class="btn white-grad">link</a>
</div>来源：https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius