Generador de Border Radius CSS
Crea valores complejos de border-radius en CSS de forma visual. Control independiente de cada esquina.
border-radius: 20px 20px 20px 20px;
Cómo usar esta herramienta
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
¿Qué es el Generador de Border Radius CSS?
La propiedad border-radius de CSS acepta hasta cuatro valores, uno por esquina, en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda. Combina radios distintos para formas orgánicas tipo gota, tarjetas asimétricas o estilos de bocadillo de diálogo. Esta herramienta te permite ajustar cada esquina con deslizadores y ver el resultado en tiempo real.
Casos de uso comunes
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Preguntas frecuentes
¿Y los radios elípticos?▼
Herramientas relacionadas
Conversor de Color (HEX/RGB/HSL)
Convierte colores entre los formatos HEX, RGB y HSL. Elige un color visualmente o introduce los valores manualmente.
Generador de Box Shadow CSS
Crea valores de box-shadow en CSS de forma visual. Previsualiza en tiempo real y copia el CSS generado.
Generador de Degradados CSS
Crea degradados CSS lineales y radiales. Elige los colores de forma visual y copia el CSS generado.
Generador de Curvas de Aceleración Cubic Bezier
Crea curvas de aceleración cubic-bezier para CSS. Incluye ajustes preestablecidos estándar.
Generador de Paletas de Color
Genera paletas de color armoniosas a partir de cualquier color base. Admite esquemas complementarios, análogos, triádicos y monocromáticos.
Generador de CSS Clamp()
Genera valores CSS fluidos y responsivos con clamp(). Escala suavemente entre tamaños mínimo y máximo a lo largo de los rangos del viewport.