1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
⬜ Dev

CSS Border Radius Generator

Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.

Cantos (raios)

Superior esquerdo

Superior direito

Inferior direito

Inferior esquerdo

Como funciona?

A propriedade border-radius aceita até 8 valores — quatro para os raios horizontais e quatro para os verticais —, separados por /. Esta ferramenta gera a sintaxe completa, então você pode criar formas orgânicas que vão muito além de cantos arredondados simples (blobs, gotas, lentes).

Use % para que o raio escale com o tamanho do elemento (ideal para responsivos), px para um raio fixo, ou em/rem para escalar com o tipográfico. Tudo roda no navegador.

Well past the default rounded corner

Rounding all four corners with a single value is the easy part. The trouble starts when you want an organic blob, a teardrop or an asymmetric card: that calls for the full border-radius syntax, up to eight values, which almost nobody keeps in their head. On this page each corner gets two controls, horizontal and vertical radius, the preview reacts instantly and the CSS is ready to copy, with square, pill, circle and blob presets to start from.

The extended syntax uses a slash: the four values before it are the horizontal radii and the four after it the vertical ones, always in the order top-left, top-right, bottom-right, bottom-left. Percentages hide a classic gotcha: the horizontal radius is relative to the width and the vertical one to the height. That is why 50% everywhere turns a rectangle into an ellipse, not a circle. The tool only emits the slash when the two sides differ, keeping the output short.

Prefer percentages when the shape should scale with the element, and px when the radius must stay fixed, like the corners of a button. Test with your component's real width and height, because the same set of radii looks completely different at another aspect ratio. If large values stop having any effect, that is the browser scaling down radii whose sum exceeds the element's side. The copied code includes the preview's width and height; delete those lines if you do not need them.

Frequently asked questions

What are the two sliders per corner for?
One sets the horizontal radius, the other the vertical one. Equal values give a circular arc; different values give an elliptical arc, and that asymmetry is what produces blobs, drops and lens shapes.
I set 50% everywhere and got an ellipse, not a circle. Why?
In percentages, the horizontal radius follows the width and the vertical one the height. On a rectangle those differ, so you get an ellipse; a true circle only happens when width equals height.
Can I use em or rem for the radius?
Yes; the unit selector applies px, %, em or rem to all eight values at once. Em and rem make the radius scale with typography, which keeps proportions intact when the user bumps up the font size.

Related Tools

✂️

CSS Clip-Path Generator

Create CSS shapes with clip-path: polygons, circles, ellipses and insets. Pick presets (star, hexagon, arrow, chevron) and copy the ready code. Everything in your browser.
▲

CSS Triangle Generator

Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.
🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.