FileConverterPro

Border Radius

Create CSS border-radius with per-corner control online for free. Visual editor with live preview. Copy CSS in one click. No signup.

Runs entirely in your browser — files never uploaded

Presets
Corner controls
CSS
border-radius: 16px;

How to use Border Radius

  1. 1. Pick a preset or start from scratch. Use buttons like Slight, Medium, Large, Pill, or Circle to jump to a common radius. Or dial in your own.
  2. 2. Adjust each corner. Move the sliders for top-left, top-right, bottom-right, and bottom-left. Toggle 'Link all' to move them together.
  3. 3. Switch units. Choose between px and %. Percentage-based radii scale with element size — 50% makes a circle on a square.
  4. 4. Copy the CSS. Click 'Copy' to grab the border-radius rule, ready for your stylesheet.

FAQ

What's the difference between px and %?

Pixels give you a fixed radius. Percentages scale with the element — 50% on a square creates a perfect circle, while 50% on a rectangle creates a pill/oval shape.

Can I make a perfect circle?

Yes — set all corners to 50% and make sure the element is a square (equal width and height).

What's a 'pill' shape?

A pill has fully rounded short sides. Use 50% border-radius on a wide rectangle to get capsule-shaped buttons or badges.

Is border-radius supported everywhere?

Yes — all modern browsers support border-radius without vendor prefixes, including IE9+.

Related tools

Advertisement