Your Element
Uma biblioteca de combinações de bordas com gradiente prontas para usar.
.gradient-border {
position: relative;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg, #7c6fff, #ff6fb0);
}
.gradient-border-inner {
background: var(--bg);
border-radius: 10px;
padding: 20px;
}
Esta é uma limitação conhecida do CSS: border-image e border-radius são incompatíveis. Para bordas gradiente com cantos arredondados, use a técnica do pseudo-elemento.
CSS simply never standardised it. The border-color property only accepts solid colors. The workarounds — border-image for sharp corners, and the double-background background-clip technique for rounded corners — are the current best practice until a native solution lands in the spec.
Use border-image when you don't need rounded corners — it's simpler and has better browser compatibility. Use the background-clip (padding-box / border-box) method when you need border-radius, since border-image ignores border-radius entirely. The generator switches between these automatically based on your corner-radius setting.
Yes. The most reliable approach is to animate background-position on an oversized gradient: set background-size: 300% 300% and use a @keyframes animation on background-position from 0% 50% to 100% 50%. For a rotating conic border, animate the conic-gradient angle using the @property API with a registered custom property.
Use whole-pixel border widths — avoid values like 1.5px which render inconsistently across devices. Also ensure you're not applying sub-pixel transforms on the element. A clean 2px or 3px border will always render crisply at any DPR.
Both techniques work in all modern browsers — Chrome, Firefox, Safari, and Edge. The background-clip: border-box method has been supported since Chrome 1, Firefox 3.5, and Safari 3. No polyfills needed. The only edge case is very old Safari (pre-14) where you may want to add -webkit-background-clip alongside the standard property.
Not with the background-clip method — it requires a solid inner background color to mask the outer gradient layer. If you genuinely need transparency inside the element, use an SVG with a stroke that references a <linearGradient> definition, or an absolutely-positioned pseudo-element with a solid background behind it.