Home › Generators › Border Radius Generator
Border Radius Generator
Use this free border radius generator to design rounded corners visually and copy the CSS in one click. Move the four corner sliders, link the corners for a uniform curve, switch to elliptical radii for blob shapes, and watch the live preview update as you drag.
Presets:
How it works
The CSS border-radius property rounds the corners of any box on a web page: a card, a button, an image, a form field, or a modal window. Each corner gets a radius, which is the size of the curve that replaces the sharp point. A radius of 0 leaves the corner square. A radius of 8px gives a gentle, modern curve that suits most cards and buttons. A radius of 20px is visibly rounded and friendly, and a radius of 50 percent on a square turns it into a circle. This generator lets you set each corner separately and see the result at once, instead of guessing numbers and refreshing your page.
The four sliders follow the order CSS uses: top-left, top-right, bottom-right, bottom-left, going clockwise from the top-left corner. When "link all corners" is on, moving any slider moves all four together, which is what you want for a uniform look — a card with four equal corners is the most common design in modern websites. Turn the link off when you want a deliberate accent, such as a card with only the top corners rounded, which is a classic look for a panel that sits at the top of a page, or a speech-bubble shape with one square corner. Asymmetric corners are a small detail that can give a design a distinct character without any extra code.
The units matter. Pixels are fixed: 20px is the same curve whether the box is 100px wide or 1000px wide, so a set of buttons in different sizes keeps a consistent look. Percent is relative to the box itself: the horizontal radius is a percent of the width, and the vertical radius is a percent of the height. That is why 50 percent makes a circle on a square element but a stretched oval on a rectangle. Percent values are best when the shape should follow the element, such as a profile photo that must stay circular at any size. Pixel values are best when the curve should stay the same across elements of different sizes, such as buttons in a toolbar. The unit switch in this tool caps percent at 50, because a radius above 50 percent has no visible effect — the browser clamps it.
Elliptical corners add a second value to each corner: a horizontal radius and a vertical radius, written in CSS with a slash between the two groups, like border-radius: 40px 20px / 20px 40px. When the two values are equal, the corner is a quarter-circle. When they differ, the corner is a quarter-ellipse, which produces the soft, organic curves you see in blob shapes and modern illustration styles. Tick the elliptical box to reveal the vertical sliders, then try a preset blob to see how different horizontal and vertical values reshape a box. Blobs look best with values that vary a lot from corner to corner, for example 60px on one corner and 20px on another, and they make good background shapes behind a hero heading or a profile photo.
The presets cover the shapes people reach for most. Rounded sets every corner to 16px, a safe default for cards. Pill sets a very large radius so the short ends of a wide element become fully round, which is the standard look for buttons and tags. Circle switches to percent and sets every corner to 50 percent, which makes a circle from a square element — remember to use a square preview to see it properly. Blob turns on elliptical mode and sets uneven values for an organic shape. Square resets everything to 0. Once you are happy, copy the CSS snippet and paste it into your stylesheet. The snippet is plain, standard CSS, and it works in every modern browser with no extra code.
Worked example
Suppose you are styling a card and want every corner rounded by 20 pixels. Set the units to pixels, leave "link all corners" on, and drag any slider to 20. The preview box immediately shows four equal curves, and the snippet reads:
border-radius: 20px;
Step 1: With all four corners linked, one value of 20px applies to the top-left, top-right, bottom-right, and bottom-left corners.
Step 2: Because all four values are the same, CSS lets you write the value once instead of four times.
Step 3: Copy the snippet and paste it into your card's CSS rule, for example .card { border-radius: 20px; }.
Now try a second shape. Switch the units to percent, choose the square preview, and press the Circle preset. The snippet becomes border-radius: 50%; and the preview becomes a perfect circle, because 50 percent of a square's width and height is exactly half the side. That one line is the standard way to make circular profile photos on the web.
FAQ
What does the border-radius CSS property do?
The border-radius property rounds the corners of an element, such as a box, a button, an image, or a card. You give it a length, like 20px, or a percentage, like 50 percent. A value of 0 keeps the corner square, a small value gives a gentle curve, and 50 percent on a square element makes a perfect circle. You can set all four corners at once or give each corner its own value.
What is the difference between px and percent in border-radius?
Pixels are fixed: 20px is the same curve no matter how big the element is. Percentages are relative to the element's own size: 50 percent of the width for the horizontal radius and 50 percent of the height for the vertical radius. Percent values scale with the element, which is why 50 percent makes a circle on a square and a pill on a wide rectangle. Use pixels when you want a consistent curve across different sizes, and percent when you want the shape to follow the element.
What is an elliptical border radius?
An elliptical border radius gives each corner two values instead of one: a horizontal radius and a vertical radius, separated by a slash in CSS, like border-radius: 40px 20px / 20px 40px. When the two values differ, the corner is an ellipse rather than a circle. Elliptical corners are how you make organic blob shapes and smooth, uneven curves that a single radius cannot produce.
How do I make a circle or a pill shape with border-radius?
For a circle, start with a square element and set every corner to 50 percent, which gives border-radius: 50 percent. For a pill, start with a rectangle that is much wider than it is tall and set every corner to half the height in pixels, or simply use 999px, which is larger than any corner needs and rounds the ends fully. This generator has one-click presets for both shapes.
Can I use the CSS from this generator in any website?
Yes. The border-radius property works in every modern browser, and the snippet this generator produces is plain CSS you can paste into your own stylesheet. The generator uses only standard CSS, with no special features, so the same snippet works in a plain HTML page, a WordPress theme, or a framework like Bootstrap or Tailwind alongside your other styles.