border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad border-radius CSS redondea las esquinas del borde exterior de un elemento. Puedes establecer un único radio para crear esquinas circulares o dos radios para crear esquinas elípticas.

Pruébalo

El radio se aplica a todo el background, incluso si el elemento no tiene borde; la posición exacta del recorte se define con la propiedad background-clip.

La propiedad border-radius no se aplica a los elementos de tabla cuando border-collapse es collapse.

Nota: Como ocurre con cualquier propiedad abreviada, las subpropiedades individuales no pueden heredar, como en border-radius:0 0 inherit inherit, lo que sobrescribiría parcialmente definiciones existentes. En su lugar, se deben usar las propiedades individuales en su forma larga.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

Sintaxis

css

/* La sintaxis del primer radio permite uno a cuatro valores */
/* Radio para los 4 lados */
border-radius: 10px;

/* esquina-superior-izquierda-e-inferior-derecha | esquina-superior-derecha-e-inferior-izquierda */
border-radius: 10px 5%;

/* esquina-superior-izquierda | esquina-superior-derecha-e-inferior-izquierda | esquina-inferior-derecha */
border-radius: 2px 4px 2px;

/* esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */
border-radius: 1px 0 3px 4px;

/* La sintaxis del segundo radio permite uno a cuatro valores */
/* (valores del primer radio) / radio */
border-radius: 10px / 20px;

/* (valores del primer radio) / esquina-superior-izquierda-e-inferior-derecha | esquina-superior-derecha-e-inferior-izquierda */
border-radius: 10px 5% / 20px 30px;

/* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha-e-inferior-izquierda | esquina-inferior-derecha */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Valores globales */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

La propiedad border-radius se especifica como:

uno, dos, tres o cuatro valores <length> o <percentage>. Esto se utiliza para establecer un único radio en las esquinas.
opcionalmente seguido por "/" y uno, dos, tres o cuatro valores <length> o <percentage>. Esto se usa para establecer un radio adicional, permitiendo esquinas elípticas.

Valores

Un rectángulo azul claro con un borde gris claro. Las 4 esquinas están redondeadas.

Un rectángulo azul claro con un borde gris claro. Las 2 esquinas en la parte superior izquierda y la inferior derecha están redondeadas.

<length>: Indica el tamaño del radio del círculo o de los semiejes mayor y menor de la elipse, utilizando valores de longitud. Los valores negativos no son válidos.
<percentage>: Indica el tamaño del radio del círculo o de los semiejes mayor y menor de la elipse, utilizando valores porcentuales. Los porcentajes para el eje horizontal se refieren al ancho del cuadro; los porcentajes para el eje vertical se refieren a la altura del cuadro. Los valores negativos no son válidos.

Por ejemplo:

css

border-radius: 1em/5em;

/* Es equivalente a: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

css

border-radius: 4px 3px 6px / 2px 4px;

/* Es equivalente a: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Definición formal

Valor inicial	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Applies to	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
Heredable	no
Percentages	refer to the corresponding dimension of the border box
Valor calculado	as each of the properties of the shorthand: `border-bottom-left-radius`: two absolute `length`s or `percentage`s `border-bottom-right-radius`: two absolute `length`s or `percentage`s `border-top-left-radius`: two absolute `length`s or `percentage`s `border-top-right-radius`: two absolute `length`s or `percentage`s
Animation type	as each of the properties of the shorthand: `border-top-left-radius`: a length, percentage or calc(); `border-top-right-radius`: a length, percentage or calc(); `border-bottom-right-radius`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

Syntaxis formal

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Ejemplos

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Ejemplos interactivos

Ejemplo 1: https://jsfiddle.net/Tripad/qnGKj/2/
Ejemplo 2: https://jsfiddle.net/Tripad/qnGKj/3/
Ejemplo 3: https://jsfiddle.net/Tripad/qnGKj/4/
Ejemplo 4: https://jsfiddle.net/Tripad/qnGKj/5/
Ejemplo 5: https://jsfiddle.net/Tripad/qnGKj/6/

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

Compatibilidad con los navegadores

BCD tables only load in the browser

Véase también

Propiedades relacionadas con border-radius: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

radio		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en cada esquina. Se usa solo en la sintaxis de un valor.
esquina-superior-izquierda-y-esquina-inferior-derecha		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en las esquinas superior izquierda e inferior derecha del cuadro del elemento. Se usa solo en la sintaxis de dos valores.
esquina-superior-derecha-y-esquina-inferior-izquierda		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en las esquinas superior derecha e inferior izquierda del cuadro del elemento. Se usa solo en las sintaxis de dos y tres valores.
esquina-superior-izquierda		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en la esquina superior izquierda del cuadro del elemento. Se usa solo en las sintaxis de tres y cuatro valores.
esquina-superior-derecha		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en la esquina superior derecha del cuadro del elemento. Se usa solo en la sintaxis de cuatro valores.
esquina-inferior-derecha		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en la esquina inferior derecha del cuadro del elemento. Se usa solo en las sintaxis de tres y cuatro valores.
esquina-inferior-izquierda		Es un `<length>` o un `<percentage>` que indica un radio a usar para el borde en la esquina inferior izquierda del cuadro del elemento. Se usa solo en la sintaxis de cuatro valores.