¿Qué es CSS border-radius?

CSS border-radius redondea las esquinas del box border de un elemento. Acepta de uno a cuatro valores que especifican el radio de cada esquina. Puedes crear círculos, elipses, formas pill y curvas orgánicas complejas.

¿Diferencia entre la abreviatura border-radius y las propiedades individuales de esquina?

La abreviatura acepta 1-4 valores en sentido horario. Las propiedades individuales (border-top-left-radius, etc.) permiten dos valores para esquinas elípticas asimétricas.

¿Cómo creo un círculo perfecto con border-radius?

Establece border-radius al 50% en un elemento cuadrado. Ya que los valores porcentuales son relativos a las dimensiones, 50% en cada dirección crea una elipse — un círculo cuando ancho igual alto.

¿Qué son los valores elípticos de border-radius?

border-radius puede tomar dos valores por esquina separados por barra, definiendo radios horizontal y vertical independientemente: `border-radius: 50px / 25px`.

¿border-radius afecta el área de clic o el overflow?

border-radius solo redondea la apariencia visual. Para recortar contenido en las esquinas agrega overflow: hidden.

¿Cómo uso border-radius en un sistema de diseño?

Los sistemas de diseño definen tokens de radio: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px). Aplícalos consistentemente.

¿border-radius es compatible con todos los navegadores?

border-radius es compatible con todos los navegadores modernos desde IE9. No se necesitan prefijos vendor.

Border Radius
Generator

Genera valores CSS border-radius con vista previa en vivo. Controla cada esquina de forma independiente o bloquéalas juntas.

Las 4 esquinasBloquear / desbloquearCSS-ready

① Arrastra los controles de radio ② Bloquea esquinas para uniformidad ③ Copia el CSS

Presets

Arriba izquierda: 20px

Arriba derecha: 20px

Abajo izquierda: 20px

Abajo derecha: 20px

CSS generado

border-radius: 20px;

Esquinas individuales

CSS border-radius acepta hasta 4 valores para controlar cada esquina independientemente: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda (sentido horario).

Abreviatura

Cuando todas las esquinas son iguales, se emite un único valor. CSS también admite radios elípticos usando la sintaxis "/".

Unidades

Border-radius acepta px (absoluto), % (relativo al tamaño del elemento) y otras unidades de longitud. 50% en un cuadrado crea un círculo perfecto.

CSS border-radius — esquinas, formas y compatibilidad con navegadores

La propiedad CSS border-radius redondea las esquinas de un elemento. Acepta hasta cuatro valores en sentido horario con px, %, em o rem. border-radius: 50% en un cuadrado crea un círculo perfecto; border-radius: 9999px crea una forma pill. La sintaxis slash (border-radius: 50px / 25px) define esquinas elípticas. Para recortar imágenes, añadir overflow: hidden. Compatible con todos los navegadores modernos desde CSS3. En Figma, pega los valores directamente en los campos de radio de esquina.

Preguntas frecuentes

La propiedad CSS border-radius redondea las esquinas del box de borde de un elemento. Acepta 1–4 valores de longitud (px, %, em) para cada esquina en sentido horario.

1 valor: todas las esquinas iguales. 2 valores: TL/BR y TR/BL. 3 valores: TL, TR/BL, BR. 4 valores: TL, TR, BR, BL. Cuando las cuatro son iguales, el generador emite un único valor.

Los valores en píxeles dan tamaños de esquina absolutos. Los porcentajes son relativos a las dimensiones del elemento — 50% crea un círculo si el elemento es cuadrado.

Establece border-radius: 50% en un elemento cuadrado. Para elementos rectangulares, border-radius: 50% / 50% crea una elipse.

Border-radius tiene un impacto mínimo en elementos estáticos. Animar border-radius puede provocar repaints. Usar border-radius con transform en la capa GPU es más eficiente.

En Figma, border-radius se establece por esquina en el panel de diseño. En Sketch, usa los manejadores de radio de esquina. Ambos admiten radios mixtos como este generador.

Border-radius funciona en la mayoría de los elementos HTML. En img requiere overflow: hidden para recortar la imagen.

CSS border-radius — esquinas, formas y compatibilidad con navegadores

Preguntas frecuentes

Explora nuestra red