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

radio Un rectángulo azul claro con un borde gris claro. Las 4 esquinas están redondeadas. 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 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. 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 Un rectángulo azul claro con un borde gris claro. Las 2 esquinas en la parte superior derecha y la inferior izquierda están redondeadas. 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 Un rectángulo azul claro con un borde gris claro. La esquina superior izquierda está redondeada. 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 Un rectángulo azul claro con un borde gris claro. La esquina superior derecha está redondeada. 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 Un rectángulo azul claro con un borde gris claro. La esquina inferior derecha está redondeada. 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 Un rectángulo azul claro con un borde gris claro. La esquina inferior izquierda está redondeada. 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.
<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 inicialas each of the properties of the shorthand:
Applies toall 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.
Heredableno
Percentagesrefer to the corresponding dimension of the border box
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Syntaxis formal

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

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

Ejemplos

Ejemplos interactivos

Especificaciones

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

Compatibilidad con los navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-radius
4 values for 4 corners
Elliptical borders
Percentages

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también