When you build a card, a button, or an avatar for a website, the hard part is often not the design but the string of numbers after border-radius. You only want the bottom-right corner to be a bit rounder, so you write three values, and suddenly all four corners look wrong. A few rounds of tweaking later, half an hour is gone. It is a small problem, but it adds up and wears you down.
This time we are looking at BrowserStyle's Border Radius Generator, available at https://browserstyle.com/border-radius-generator/. According to the official site, it lets you set the radius of each corner in px or %, and you can also set a separate vertical radius to create elliptical corners. Once you are done, you can copy the shortest border-radius shorthand, the longhand version with each corner written out, or Tailwind CSS classes. The site also says the tool is free.
For bloggers and freelancers, the value of a tool like this is not that it does something you could not do otherwise, but that it saves you trial and error. My own take is that rounded corners are easier to tune by eye than by calculation, especially for elliptical corners or irregular shapes like a blob. So this guide walks through the workflow and clears up a few concepts that are easy to mix up.
What Is BrowserStyle's Border Radius Generator?
BrowserStyle's Border Radius Generator is a free web tool that lets you set CSS rounded corners visually and copy the code directly. According to the official site, the top of the page offers seven presets: Card, Pill, Circle, Tab, Speech bubble, Leaf, and Blob. Click one to use it as a starting point. You can also enter your own preview box width and height, and the official default is 280 × 180. As you adjust the values, the CSS below updates in real time, so there is no "generate" button to press.
In addition, the footer of the official site says the tool runs in your browser and nothing you type is sent anywhere. For someone who only wants to tweak a corner, that may not matter much. But if you like to test snippets from a company project, a statement like this is at least reassuring. Of course, this is the site's own claim, and I have not verified it independently.
How Do You Use the Border Radius Generator?
Using BrowserStyle's Border Radius Generator takes three actions: pick a shape, adjust the values, and copy the code. The page has few fields, and the English labels use common design terms. Below, we follow the order of the official page and walk through it one step at a time.
Step 1: Start with a preset that is close to what you want
Open the official page and choose the preset that looks closest to what you have in mind from Card, Pill, Circle, and the rest. Editing an existing shape is much faster than starting from zero. If you want an irregular, organic shape, starting from Blob will save you time.
Step 2: Choose a unit, then enter the box size
Under Unit, pick px or %, then set Box width and Box height to the actual size of your element. This step is easy to skip, but percentage radii are calculated from the size of the box. If the size is wrong, the preview will not be accurate.
Step 3: Adjust the radius of each corner
If you tick "Same radius on every corner," all four corners change together. Untick it, and you can set the Radius for Top left, Top right, Bottom left, and Bottom right separately. For shapes that are not symmetrical from top to bottom, such as cards or tabs, this is the step that does the work.
Step 4: Tick the vertical radius if you need elliptical corners
After you tick "Separate vertical radius (elliptical corners)," each corner gets an extra field for its vertical radius. When the horizontal and vertical values differ, that corner becomes part of an ellipse instead of a circle. The arbitrary-value example mentioned later on the official page uses exactly this slash syntax.
Step 5: Copy the CSS or the Tailwind classes
The CSS block lets you switch between Shorthand and Longhand. Once the output looks right, click "Copy CSS." If your project uses Tailwind, click "Copy classes" in the Tailwind CSS block instead. Once you are used to it, the whole process should take under a minute.
How Do You Read the border-radius Shorthand?
The border-radius shorthand sets the radius of the four corners in order, starting from the top left and moving clockwise. According to the official explanation, border-radius: 4px 8px 16px 32px means top left, top right, bottom right, and bottom left, in that order. Any value you leave out copies the opposite corner. With three values, the bottom left copies the top right. With two values, the bottom right copies the top left and the bottom left copies the top right. With one value, all four corners are the same.
Take the example shown by default on the official page: border-radius: 24px 24px 8px; has only three values. The top left and top right are both 24px, the bottom right is 8px, and the bottom left, which is left out, copies the top right, so it is also 24px. The matching Tailwind classes are rounded-3xl rounded-br-lg, meaning 24px overall with the bottom right changed to 8px. A shape that is round on top with a tighter bottom-right corner works nicely for article cards or speech bubbles.
The slash is another spot where people get stuck. According to the official site, the values before the slash are horizontal radii and the values after it are vertical radii. For example, border-radius: 40px / 20px gives every corner an ellipse 40px wide and 20px tall. Most people have to stop and think the first time they see this syntax. Tick "Separate vertical radius" in the tool and the preview makes it obvious, which I think is where the tool is most useful.
How Do You Choose Between px, %, and 9999px?
px is a fixed-size radius, % is a radius that scales with the box itself, and 9999px is the usual way to make a pill shape. The three look similar, but they behave very differently in practice. I put them into the table below for easy comparison.
| Syntax | Basis | Best for | Watch out for |
|---|---|---|---|
| px (e.g., 12px) | A fixed value that does not change with box size | Cards and buttons that should keep the same curve at different sizes | Scaled down automatically by the browser if set too large |
| % (e.g., 50%) | The horizontal radius uses the box width, and the vertical radius uses the box height | Turning a square avatar into a circle | 50% is a true circle only on a square; on a rectangle it becomes an ellipse |
| 9999px | A very large px value, scaled down to half of the shorter side | Pill-shaped buttons and tags | Gives semicircular ends at any width |
The official site also explains what happens when a radius is too large. If the two radii along one side add up to more than the length of that side, the browser scales all the radii down by the same factor until the tightest side fits. For example, set 80px on all four corners of a 200 × 100px box. The top needs 160px and fits, but the left side needs 160px and only has 100px. So all four radii are multiplied by 0.625 and become 50px, and the box turns into a pill.
This also explains why 9999px produces a pill at any size: it always gets scaled down to half of the shorter side. The official Pill preset is 280 × 72px, and each corner is actually drawn at 36px, exactly half the height. When scaling happens, the tool tells you the radii the browser really draws. I find that hint more useful than the preview itself, because it directly answers the question, "Why does it look like 50px when I set 80px?"
Should You Copy the Shorthand, Longhand, or Tailwind Classes?
BrowserStyle's Border Radius Generator offers three kinds of output, shorthand, longhand, and Tailwind classes, each suited to a different way of writing code. Which one you use depends on how your project is written, and none is better than the others. The table below is my summary.
| Output | What it contains | Best for | Official example or action |
|---|---|---|---|
| Shorthand | The shortest form with the same meaning, which the official site always outputs | People who want a compact stylesheet | border-radius: 24px 24px 8px; |
| Longhand | All four corner radii written out | People who want to see every corner at a glance | Switch to Longhand in the CSS block |
| Tailwind classes | Border radius classes for Tailwind CSS v4 | People who already use Tailwind | rounded-3xl rounded-br-lg |
One detail about Tailwind is worth mentioning. According to the official site, when every corner falls exactly on Tailwind's radius scale, the tool gives named classes, using as few as possible, such as rounded-xl or rounded-t-xl rounded-b-none. For any other value, a percentage, or an elliptical corner, it produces a single arbitrary-value class, like rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%].
The scale itself is also listed on the official site, and I have put it into the table below. The site notes that these values assume the default 16px root font size, because Tailwind's scale is in rem.
| Tailwind class | Radius |
|---|---|
| rounded-none | 0 |
| rounded-xs | 2px |
| rounded-sm | 4px |
| rounded-md | 6px |
| rounded-lg | 8px |
| rounded-xl | 12px |
| rounded-2xl | 16px |
| rounded-3xl | 24px |
| rounded-4xl | 32px |
Also, according to the official site, Tailwind's own rounded-full is calc(infinity * 1px), which looks the same as 9999px. If you already use Tailwind, this tool saves you the work of converting "how many px is which class." For those users, that is a very practical bonus.
What Are the Limits of border-radius?
border-radius can only curve corners outward; it cannot cut notches inward, and it does not automatically clip the content inside. The official FAQ covers the two most common pitfalls clearly. First, images: the radius only affects the element's own background and border, so child elements need overflow: hidden or overflow: clip added before they get clipped to the curve. If you apply the radius directly to an img, that image clips itself.
The second is notches. A shape with an inward bite, like a ticket stub, cannot be made with border-radius, and the official site suggests using a mask or clip-path instead. The same site offers a clip-path generator that can cut out arbitrary shapes. It also has a CSS to Tailwind converter, a flexbox generator, and a CSS grid generator, so layout and conversion needs can be handled in the same place.
Can You Trust the Testing Described on the Official Site?
BrowserStyle publishes how it tests the tool, checking the output against the corner radii that Chrome actually computes. According to the official site, it uses 497 different shapes and box sizes. The copied CSS is pasted into Chrome, and the 1,988 corner radii Chrome computes must exactly match the values you set. The Tailwind classes are compiled with Tailwind CSS 4.3.3 and must produce the same radii.
For the shrink-to-fit rule that applies when radii are too large, the site says it tests 430,727 points to check whether they fall inside the rounded box the browser actually draws. All of these figures are the site's own, and I have not reproduced them one by one, so treat them as a reference. Still, a small tool that lays out its testing method is at least more sincere than one that just says "very accurate."
Is BrowserStyle's Border Radius Generator Worth Bookmarking?
BrowserStyle's Border Radius Generator is a free tool that explains border-radius syntax, units, and edge cases in one place. For bloggers, design beginners, and front-end developers who write CSS by hand, what it saves is the time spent on trial and error. Back to the article card from the start: pick the Card preset, adjust a few numbers, and you get a line like border-radius: 24px 24px 8px; without guessing which value belongs to which corner.
Of course, it won't cut inward notches for you or fix images that overflow the curve, so you still need to add overflow: hidden yourself or switch to clip-path. Small details like rounded corners are less error-prone when you tune them in a preview than when you write them from memory. The value of a good CSS tool is not how many features it has, but how many rounds of trial and error it saves you.
What Are the Common Questions About BrowserStyle's Border Radius Generator?
This FAQ covers the questions readers ask most often about cost, availability, unit choice, and the limits of rounded corners.
Does the Border Radius Generator require payment or sign-up?
According to the official site, the tool is free, and the page shows no mention of a login or a paid plan. So there is currently no upgrade decision to weigh, and you can just open the URL and use it. Before relying on it, it is worth checking the official site for the latest details.
Is the tool available in my region?
The tool is an ordinary web page, and the page does not mention any regional restriction, so you can open the URL in a browser and use it. The interface and instructions are in English, and the field names match the steps in this guide.
Should I use px or % for rounded corners?
px is a fixed size, so the curve stays the same no matter how big the box is, while % is calculated from the width and height of the box. According to the official site, 50% gives a true circle only on a square and becomes an ellipse on a rectangle. For cards that should keep a fixed curve, px is the more intuitive choice.
Should I write 9999px or 50% for a pill-shaped button?
The official site recommends 9999px. An oversized radius is scaled down to half of the shorter side, so you get semicircular ends at any width. On a rectangle, 50% gives elliptical ends instead.
Why do the corners of an image still look square inside a rounded container?
Because border-radius only affects the background and border of the element itself, and child elements are not clipped automatically. According to the official site, you need to add overflow: hidden or overflow: clip. If you apply the radius directly to an img, that image clips itself.
Can border-radius make a ticket-style notch?
No. border-radius can only curve corners outward. The official site says inward notches need a mask or clip-path, and it offers a clip-path generator for that.