Propiedad CSS border-radius

La propiedad border-radius se utiliza para crear esquinas redondeadas en el borde exterior de un elemento. Funciona tanto si el elemento tiene un borde visible como si no, y también recorta el fondo y la sombra de caja a la forma redondeada. Esta página cubre la sintaxis abreviada, las reglas de uno a cuatro valores, las unidades de porcentaje frente a longitud, la sintaxis de barra oblicua elíptica y los casos de uso más comunes en el mundo real.

La propiedad border-radius es una de las propiedades de CSS3.

Esta propiedad es una propiedad abreviada de las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius, que se utilizan para configurar las cuatro esquinas de un elemento por separado. Sin embargo, la propiedad border-radius puede usarse para definir las cuatro esquinas a la vez. Puede tener de uno a cuatro valores.

Si se proporcionan cuatro valores, se aplican a las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda, respectivamente. Si se omite el valor inferior izquierdo, toma por defecto el valor superior derecho. Si se omite el valor inferior derecho, toma por defecto el valor superior izquierdo. Si solo se proporcionan dos valores, el primero se aplica a las esquinas superior izquierda e inferior derecha, y el segundo a las esquinas superior derecha e inferior izquierda. Si solo se proporciona un valor, se aplica a las cuatro esquinas.

La propiedad border-radius se especifica como:

uno, dos, tres o cuatro valores de longitud o porcentaje que se usan para definir un único radio para las esquinas.
seguidos opcionalmente por una barra oblicua ( / ) y uno, dos, tres o cuatro valores de longitud o porcentaje. Esto sirve para definir un radio adicional, de modo que se pueden tener esquinas elípticas.

El primer conjunto de valores (1-4) define el radio horizontal para las cuatro esquinas. Un segundo conjunto opcional de valores, precedido por una barra oblicua, define los radios verticales para las cuatro esquinas. Si solo se proporciona un conjunto de valores, estos valores se usarán para determinar tanto el radio vertical como el horizontal por igual.

Cuando se usa un porcentaje, se resuelve con respecto al tamaño propio del elemento: el radio horizontal es un porcentaje del ancho del cuadro y el radio vertical es un porcentaje de su alto. Por eso border-radius: 50% convierte un cuadrado en un círculo perfecto, mientras que el mismo valor en un rectángulo produce una elipse.

Valor inicial	0
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No
Animable	Sí. Cada una de las propiedades de la abreviatura es animable.
Versión	CSS3
Sintaxis DOM	`object.style.borderRadius = "20px";` (Nota: JavaScript usa camelCase `borderRadius`, a diferencia del nombre de propiedad CSS con guiones.)

Sintaxis

Sintaxis de la propiedad CSS border-radius

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Ejemplo de la propiedad border-radius:

Ejemplo de la propiedad CSS border-radius

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Vea un ejemplo con valores en porcentaje y píxeles:

Ejemplo de la propiedad border-radius con valores en porcentaje y píxeles:

Ejemplo de la propiedad CSS border-radius con valores en porcentaje y píxeles

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Pruébalo tú mismo »

Un valor en píxeles otorga el mismo radio de esquina fijo sin importar cómo se redimensione el elemento, que es lo que generalmente se desea para botones, tarjetas y entradas. Un porcentaje escala con el elemento, por lo que border-radius: 50% en un elemento cuadrado produce un círculo, un truco habitual para avatares e insignias.

También puede definir border-radius en un elemento con color de fondo o imagen de fondo.

Ejemplo de la propiedad border-radius con las propiedades background-color y background-image:

Ejemplo de la propiedad CSS border-radius con las propiedades de color de fondo e imagen de fondo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Pruébalo tú mismo »

Nota: En navegadores más antiguos, es posible que las imágenes de fondo no se recorten a las esquinas redondeadas. Use background-clip: border-box; para garantizar un comportamiento consistente.

Ahora veamos un ejemplo con múltiples cajas con diferentes valores de border-radius que forman la silueta de las cajas.

Ejemplo de la propiedad border-radius con múltiples valores:

Ejemplo de la propiedad CSS border-radius con diferentes valores (%,px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Pruébalo tú mismo »

La sintaxis de barra oblicua (por ejemplo border-radius: 10px 100px / 120px) separa los radios horizontales de los verticales, que es la forma de crear esquinas asimétricas y elípticas en lugar de simples cuartos de círculo.

Casos de uso comunes

Botones y tarjetas redondeados: un valor fijo pequeño como border-radius: 6px suaviza las esquinas sin distorsionar la forma.
Botones en forma de píldora: un valor grande como border-radius: 9999px redondea completamente los lados cortos en una cápsula.
Círculos y avatares: border-radius: 50% en un elemento cuadrado (ancho y alto iguales) produce un círculo perfecto.
Manchas decorativas: cuatro valores de porcentaje diferentes, opcionalmente con la sintaxis /, crean formas orgánicas con aspecto de hoja.

Valores

Valor	Descripción	Pruébalo
length	Establece el tamaño del redondeo de las esquinas.	Pruébalo »
%	Establece el tamaño del redondeo de las esquinas en porcentaje.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'border-radius'?

Define el radio del borde de la página.Determina el color de fondo del borde.Controla la curvatura de los bordes de un elemento.Permite crear esquinas redondeadas en un elemento.