Atributo border-radius de CSS

Definición y uso

El atributo border-radius es un atributo abreviado que se utiliza para establecer los cuatro atributos border-*-radius.

Consejo:Esta propiedad le permite agregar bordes redondeados a los elementos.

Véase también:

Tutoriales de CSS3:Borde de CSS3

Ejemplo

Añade un borde redondeado a los elementos div:

div
{
border:2px solid;
border-radius:25px;
}

Prueba tú mismo

Hay más ejemplos en la parte inferior de la página.

Sintaxis de CSS

border-radius: 1-4 longitud|% / 1-4 longitud|%;

Notas:Establece los cuatro valores de cada radii en este orden. Si se omite bottom-left, es igual a top-right. Si se omite bottom-right, es igual a top-left. Si se omite top-right, es igual a top-left.

Valor del atributo

Valor Descripción Prueba
longitud Define la forma de las esquinas redondas. Prueba
% Define la forma de las esquinas redondas en porcentajes. Prueba

Ejemplo 1

border-radius:2em;

equivale a:

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;

equivale a:

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;

Detalles técnicos

Valor por defecto: 0
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.borderRadius="5px"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5