Your Element
Una biblioteca de combinaciones de bordes con degradado listas para usar. Cada receta muestra la técnica CSS utilizada — ya sea border-image, pseudo-elemento con gradiente, o background-clip — para que puedas entender y adaptar el código.
.gradient-border {
position: relative;
border-radius: 12px;
padding: 2px; /* grosor del borde */
background: linear-gradient(135deg, #7c6fff, #ff6fb0);
}
.gradient-border-inner {
background: var(--bg);
border-radius: 10px;
padding: 20px;
}
.gradient-border {
border: 2px solid transparent;
border-image: linear-gradient(135deg, #7c6fff, #ff6fb0) 1;
/* Nota: border-image no soporta border-radius */
}
Esta es una limitación conocida de CSS: border-image y border-radius son incompatibles. Para bordes degradados con esquinas redondeadas, usa la técnica del pseudo-elemento con padding y un wrapper.
Sí. Anima la posición del fondo del pseudo-elemento o usa filter: hue-rotate() para crear un efecto de borde arcoíris animado.
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.