Como usar: Border Radius Generator
- Drag the slider to round all four corners — or choose Each corner to set top-left, top-right, bottom-right and bottom-left separately.
- Switch the unit:
pxfor fixed rounding,%to scale with the element (50% on a square makes a circle). - Choose Elliptical or Random blob for organic shapes with 8 values.
- Copy the CSS — it is shortened to the fewest values that give the same shape.
How border-radius values work
| CSS | Corners |
|---|---|
border-radius: 12px | all four |
border-radius: 12px 4px | top-left & bottom-right, top-right & bottom-left |
border-radius: 12px 8px 4px 0 | top-left, top-right, bottom-right, bottom-left (clockwise) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptical: horizontal radii / vertical radii — blob shapes |
Pill buttons: use a large value like 9999px — the browser caps it at half the height, so the ends stay round at any size. Circles: 50% on a square element. Percentages are relative to the box’s width (horizontal radii) and height (vertical radii).
Related: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
Também pesquisado como: css border radius, rounded corners css, css blob generator, fancy border radius, css rounded corners generator, border radius online.
Ferramentas que combinam com: Border Radius Generator
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
- Cubic Bezier Generator — Shape an easing curve by dragging two handles and race it against standard easings.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Perguntas frequentes
How do I make rounded corners in CSS?
Use border-radius, e.g. border-radius: 12px for all corners, or four values for top-left, top-right, bottom-right and bottom-left.
How do I make a pill-shaped button?
Set border-radius to a large value such as 9999px. The browser limits it to half the height, so the ends are always perfectly round.
How do I make a circle?
Give the element equal width and height and border-radius: 50%.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and after it vertical radii, so each corner becomes an ellipse — that is how blob shapes are made.
Posso instalar o Border Radius Generator como um aplicativo da web e usá-lo offline?
Sim. O Border Radius Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.