Ejemplo
Añadir bordes redondeados a un <div> elemento:
div
{
border: 2px solid;
border-radius: 25px;
}
Inténtalo tú mismo " Definición y Uso
La propiedad border-radio es una propiedad abreviada para establecer los cuatro frontera - * - propiedades del radio.
Tip: Esta propiedad le permite agregar bordes redondeados a los elementos!
| Valor por defecto: | 0 |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.borderRadius="25px" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
sintaxis CSS
border-radius:1-4 length|%/1-4 length|%|initial|inherit;Note: Los cuatro valores para cada uno de los radios se dan en el orden superior izquierda, superior derecha, inferior derecha, abajo a la izquierda. Si se omite inferior izquierda es la misma que la parte superior derecha. Si se omite la parte inferior derecha es la misma que la parte superior izquierda. Si se omite la parte superior derecha es el mismo que arriba a la izquierda.
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| length | Define la forma de las esquinas. El valor por defecto es 0 | Juegalo " |
| % | Define la forma de las esquinas en% | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Ejemplo 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Ejemplo 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Páginas relacionadas
CSS3 tutorial: CSS3 Fronteras
Referencia HTML DOM: borderRadius property