No, you cannot use border-image for an element with border-radius , because according to the specifications , only the background element is cropped based on the radius of the border, not border-image . Thus, the image will always be a rectangle (or square).
If you need a transparent center (or a transparent area of content), it is best to use SVG. An SVG rotation can even take a gradient as a value, and therefore it can create a rounded shape, the border of which is a gradient, and the center is transparent.
path used to create the form is simple, and you can learn more about path commands here .
.border-with-grad { position: relative; height: 100px; width: 250px; color: white; line-height: 100px; text-align: center; letter-spacing: 1.5px; } .border-with-grad svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .border-with-grad path { fill: transparent; stroke: url(#border-gradient); stroke-width: 4; } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); min-height: 100vh; font-family: sans-serif; }
<div class='border-with-grad'> <svg viewBox='0 0 250 100'> <defs> <linearGradient id='border-gradient' gradientUnits='objectBoundingBox' gradientTransform='rotate(5 0.5 0.5)'> <stop offset='0%' stop-color='rgb(248,244,135)' /> <stop offset='25%' stop-color='rgb(248,244,135)' /> <stop offset='75%' stop-color='rgb(53,176,182)' /> <stop offset='100%' stop-color='rgb(53,176,182)' /> </linearGradient> </defs> <path d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' /> </svg> CLICK HERE </div>
With CSS, we can use mask-image to make the center part transparent, but its browser support is very poor. Currently, only webkit-enabled browsers are supported. Another way is to use clip-path , but this is not the case if you need to support IE and Firefox (Firefox only supports SVG clip paths).
Harry
source share