Propiedad border-radius

La propiedad border-radius crea esquinas redondeadas para el borde y el fondo. Los valores de la propiedad son cualquier unidad de tamaño. Valor por defecto: 0. Es una abreviatura para las propiedades border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaxis

selector {
	border-radius: valor;
}

Cantidad de valores

La propiedad puede tomar 1, 2, 3 o 4 valores, especificados separados por espacios:

Cantidad	Descripción
`1`	Para todas las esquinas simultáneamente.
`2`	El primer valor establece el redondeo para la esquina superior derecha e inferior izquierda, el segundo - para la superior izquierda e inferior derecha.
`3`	El primer valor establece el redondeo para la esquina superior izquierda, el segundo - simultáneamente para la superior derecha e inferior izquierda, y el tercero - para la esquina inferior derecha.
`4`	El primer valor establece el redondeo para la esquina superior izquierda, el segundo - para la superior derecha, el tercero - para la esquina inferior derecha, y el cuarto - para la esquina inferior izquierda.

Redondeo elíptico

Dos valores separados por una barra establecen un redondeo elíptico. El valor antes de la barra indica el redondeo horizontal, y el valor después de la barra - el vertical:

selector {
	border-radius: horizontal / vertical;
}

Si se especifican redondeos para varias esquinas, antes de la barra se enumeran todos los redondeos horizontales, y después de ella - todos los verticales.

Ejemplo

Establezcamos un redondeo de 10px para todas las esquinas:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ejemplo

Veamos cómo se ven los redondeos para un borde de puntos:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un redondeo de 10px para las esquinas de una diagonal, y un redondeo de 40px - para las esquinas de la segunda diagonal:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un redondeo de 10px para la esquina superior izquierda, un redondeo de 30px para la esquina inferior derecha, y redondeos de 50px - para las esquinas de la segunda diagonal:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos diferentes redondeos para cada una de las esquinas:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ejemplo

Hagamos un redondeo elíptico, estableciendo 20px para la parte horizontal del redondeo, y 40px - para la vertical:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Ejemplo

Ahora establezcamos diferentes redondeos elípticos para todas las esquinas por separado:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Ejemplo

Si para un bloque cuadrado se establece un redondeo igual a la mitad del lado del cuadrado, se obtiene un círculo:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Ejemplo

Si se establece un redondeo mayor que el lado del cuadrado, igualmente se obtendrá un círculo:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Ejemplo

Un círculo también se puede obtener si se establece border-radius en 50% (la ventaja es que al cambiar el tamaño del cuadrado no será necesario cambiar el redondeo):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Ejemplo

Si se establece border-radius en porcentaje para un rectángulo, se obtiene un redondeo elíptico. Si el ancho es de 400px, la altura de 200px, y border-radius en 10%, esto es equivalente a escribir 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Ejemplo

Establezcamos el valor de border-radius en 50% para un rectángulo - se obtendrá una elipse:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Ejemplo

La propiedad border-radius redondea no solo las esquinas del borde, sino también las del fondo:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Véase también

la propiedad border,
que es una propiedad abreviada para el borde