Las herramientas de desarrollo que usas cada día, todas en un mismo lugar.

Conversores, formateadores, hashes, validadores y las pequeñas utilidades que no dejas de reabrir se quedan juntos en lugar de perderse entre pestañas.

GitHub

/ Herramientas

■

/ Buscador de herramientas

109 herramientas

/ Generador de Border Radius

Unidad

Preajustes

Enlazar todas las esquinas

Superior izquierda: 12px

Superior derecha: 12px

Inferior izquierda: 12px

Inferior derecha: 12px

Color de vista previa

Tamaño de vista previa: 150px

Vista previa

Código CSS

Propiedades por esquina individuales

Clase de Tailwind

/ Herramienta seleccionada

■

Generador de Border Radius - herramienta de generación gratuita

Generador visual de border-radius CSS con control individual de cada esquina

■ 01

¿Qué es CSS border-radius?

La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Puedes definir las cuatro esquinas con el mismo valor o especificar valores distintos para cada esquina para crear formas únicas.

■ 02

¿Cómo funciona?

El radio de borde se puede especificar con 1 a 4 valores. Con 1 valor, todas las esquinas son iguales. Con 2 valores, el primero se aplica a superior-izquierda/inferior-derecha y el segundo a superior-derecha/inferior-izquierda. Con 3 valores: superior-izquierda, superior-…

■ 03

Casos de ejemplo

Cubre Todas las esquinas iguales, Forma de píldora y Esquinas distintas para que puedas comparar entradas y salidas comunes rápidamente.

/ Herramientas relacionadas

/ Código

■

Código fuente de la herramienta seleccionada, mostrado aquí junto a la versión en vivo a la derecha.

/ Código fuente

TypeScript

typescript

// No external dependencies needed - generates CSS border-radius strings

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomRight: number;
  bottomLeft: number;
  unit: 'px' | '%' | 'rem';
}