Ejemplo
Añadir un borde redondeado a la esquina inferior derecha de un <div> elemento:
div
{
border: 2px solid;
border-bottom-right-radius: 2em;
}
Inténtalo tú mismo " Definición y Uso
La propiedad de radio border-bottom-derecha define la forma del borde de la esquina inferior derecha.
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.borderBottomRightRadius="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-bottom-right-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
sintaxis CSS
border-bottom-right-radius:length|%[length|%]|initial|inherit;Note: Los dos valores de longitud o porcentaje de las propiedades del radio-border-bottom-derecha definir los radios de un cuarto de elipse que define la forma de la esquina del borde del borde exterior. El primer valor es el radio horizontal, el segundo el radio vertical. Si se omite el segundo valor se copia de la primera. Si bien la longitud es cero, la esquina es cuadrada, no redondeado. Los porcentajes para el radio horizontal se refieren a la anchura de la caja de la frontera, mientras que los porcentajes para el radio vertical, se refieren a la altura de la caja de la frontera.
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| length | Define la forma de la esquina inferior derecha. El valor por defecto es 0 | Juegalo " |
| % | Define la forma de la esquina inferior derecha 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 |
Páginas relacionadas
CSS3 tutorial: CSS3 Fronteras
Referencia HTML DOM: borderBottomRightRadius property