Definición de .border-radius aplicado en CSS
Puede dar cualquier elemento «esquinas redondeadas» aplicando un .border-radius a través de CSS. Solo notará si hay un cambio de color involucrado. Por ejemplo, si el elemento tiene un color o borde de fondo que es diferente al elemento que está arriba.
Caso de uso : propiedad CSS border-radius
Si quieres utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente manera:
.element {
border-radius: 10px;
}Otro ejemplo más avanzado de .border-radius es el siguiente de CODEPEN:
Sintaxis de .border-radius en CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| longitud | Define la forma de las esquinas. El valor predeterminado es 0. | |
| % | Define la forma de las esquinas en % | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .border-radius
Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-spacing | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
