▷ Border radius css | Actualizado abril 2024

Generador de radios en los bordes

fondo: -moz-lineal-gradiente(45deg, transparente 10px, #c00 10px), -moz-lineal-gradiente(135deg, transparente 10px, #c00 10px), -moz-lineal-gradiente(225deg, transparente 10px, #c00 10px), -moz-lineal-gradiente(315deg, transparente 10px, #c00 10px);

fondo: -o-lineal-gradiente(45deg, transparente 10px, #c00 10px), -o-lineal-gradiente(135deg, transparente 10px, #c00 10px), -o-lineal-gradiente(225deg, transparente 10px, #c00 10px), -o-lineal-gradiente(315deg, transparente 10px, #c00 10px);

background: -webkit-linear-gradient(45deg, transparente 10px, #c00 10px), -webkit-linear-gradient(135deg, transparente 10px, #c00 10px), -webkit-linear-gradient(225deg, transparente 10px, #c00 10px), -webkit-linear-gradient(315deg, transparente 10px, #c00 10px);

No tengo ninguna afiliación con ninguno de los sitios, simplemente me ayudaron a conseguir lo que quería. Con clip-path: polygon y -webkit-clip-path: polygon funcionó en todos los dispositivos y navegadores que teníamos como requisito.

He actualizado la impresionante respuesta de AlphaMale para hackear los bordes biselados como se pidió originalmente. Básicamente, utiliza un div biselado con un poco más pequeño en su interior. El color de fondo del div exterior se convierte en el color del borde cuando el resto está cubierto por el div interior con chaflanes a juego.

Esquinas redondeadas css

border-top-right-radiusLa propiedad CSS border-top-right-radius redondea la esquina superior derecha de un elemento especificando el radio (o el radio de los ejes semi-mayor y semi-menor) de la elipse que define la curvatura de la esquina.

Nota: Si el valor de esta propiedad no se establece en una propiedad abreviada border-radius que se aplica al elemento después de la propiedad CSS border-top-right-radius, el valor de esta propiedad se restablece a su valor inicial mediante la propiedad abreviada.

Denota el tamaño del radio del círculo o de los ejes semi-mayor y semi-menor de la elipse. Como longitud absoluta puede expresarse en cualquier unidad permitida por el tipo de datos CSS <length>. Los porcentajes para el eje horizontal se refieren a la anchura de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.

Borde css

Nota: Al igual que con cualquier propiedad abreviada, las subpropiedades individuales no pueden heredar, como en border-radius:0 0 heredar heredar, lo que anularía parcialmente las definiciones existentes. En su lugar, hay que utilizar las propiedades individuales de la versión abreviada.

Denota el tamaño del radio del círculo, o de los ejes semimayor y semiminor de la elipse, utilizando valores porcentuales. Los porcentajes para el eje horizontal se refieren a la anchura de la caja; los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.

Definición formalValor inicial de cada una de las propiedades de la abreviatura:Se aplica a todos los elementos; pero los Agentes de Usuario no están obligados a aplicarlo a los elementos de tabla y tabla en línea cuando el colapso del borde es el colapso. El comportamiento en los elementos de tabla interna no está definido por el momento.. También se aplica a ::first-letter.InheritednoPercentagesreferirse a la dimensión correspondiente de la caja de bordeValor calculadocomo cada una de las propiedades de la sintaxis shorthand:Animation typecomo cada una de las propiedades de la sintaxis shorthand:Formal<length-percentage>{1,4} [donde <longitud-porcentaje> = <longitud> | <porcentaje>Ejemplos <pre id=»ejemplo-1″>