Useful Utilities

CSS Border Radius Generator

Round corners easily. Create organic shapes by adjusting the border-radius for each corner independently.

Last updated: 2026-01-11

Corner Controls

10px
10px
10px
10px

Live Preview

Shape
border-radius: 10px 10px 10px 10px;

Key Features

  • Individual Control: Adjust Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners separately.
  • Live Preview: See your shape transform in real-time.
  • Shortcode Generation: Automatically generates the 4-value CSS syntax.
  • Reset Button: Quickly return to a square shape.

How to Use This Border Radius Generator

  1. Drag the sliders to round specific corners of the box.
  2. Move all sliders to 0 to create a sharp square.
  3. Move all sliders to 100px (assuming the box is 200px) to create a perfect circle.
  4. Click Copy to get the CSS code.

Why Use Use a Border Radius Generator?

Memorizing which value corresponds to which corner in the 4-value syntax can be confusing. This tool visualizes the changes instantly, allowing you to create complex organic shapes (like leaves or blobs) without mental math.

Frequently Asked Questions

What is the order of the 4 values?

The standard order is: `Top-Left`, `Top-Right`, `Bottom-Right`, `Bottom-Left` (clockwise starting from top-left).

Can I use percentage values?

Yes, CSS supports percentages (e.g., `50%` to make a circle). This generator outputs pixel values for precision, but you can manually change `px` to `%` in your code.

How do I make a pill shape?

Set a very high border-radius (e.g., 999px) on all corners. The browser will cap it at the maximum possible roundness for the pill effect.

Does this work on images?

Yes, adding `border-radius` to an `img` tag will round its corners or clip it into a circle.