Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Rounded corners generator (border-radius)

Adjust each corner's radius independently and get the CSS border-radius code with a live preview.

Processed on your device. Nothing is sent to any server.
border-radius: 24px 24px 24px 24px;

Generates the shorthand border-radius syntax with the four values in top-left, top-right, bottom-right, bottom-left order.

Use cases

  • Creating a card with asymmetric corners.
  • Designing a teardrop or chat-bubble shape.
  • Visually fine-tuning a button's rounding.

How it works

  1. 1

    Adjust each corner

    Enter the radius in pixels for each of the four corners.

  2. 2

    Copy the CSS

    Copy the border-radius property ready to paste.

Technical details

  • Each corner accepts 0 to 200 pixels. The code follows CSS order: top left, top right, bottom right, bottom left.
  • If a radius exceeds half the element's side, the browser scales it down proportionally; that's why a very high value on a small button gives a pill shape.
  • It only works in pixels. For a perfect circle on a square element of any size, write border-radius: 50% yourself.

Frequently asked questions

Can I set a different radius per corner?

Yes, each of the four corners is controlled independently.

Related tools

← Colors & design