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

cssselector {
  border-radius: valor;
}

Cantidad de valores

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

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:

cssselector {
  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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Ejemplo

Establezcamos diferentes redondeos para cada una de las esquinas:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Véase también