CSS Border Radius Syntax: Shorthand and Longhand

Ah, CSS border-radius. You’ve likely landed here because you’re staring at a CSS file, or perhaps a design mockup, and you’re trying to figure out why your elegantly rounded corners aren’t quite… elegant. Or maybe you’re just trying to remember if it was border-radius-top-left or border-radius-left-top. The truth is, the syntax for CSS border-radius can be a bit of a head-scratcher, especially when you’re faced with those seemingly cryptic four-value declarations. Let’s cut through the confusion and get your corners looking exactly how you intend them.

The real problem isn’t just memorizing the syntax; it’s understanding *how* it works and *why* you’d choose one method over another. Many tutorials will show you the different ways to write it, but few truly explain the underlying logic that makes it so powerful (and occasionally, so bewildering).

The Longhand: Explicit Control

Let’s start with the most explicit form: the longhand properties. These are straightforward and, as the name suggests, longer. They give you precise control over each individual corner. If you want to round only the top-left corner, this is your go-to.

The longhand properties are:

• border-radius-top-left
• border-radius-top-right
• border-radius-bottom-right
• border-radius-bottom-left

Each of these properties accepts one or two values. When you provide a single value, it’s applied to both the horizontal and vertical radii of that corner. For example:

.element { border-radius-top-left: 15px; }

This rounds the top-left corner with a radius of 15 pixels. Simple enough. But what if you want an elliptical curve instead of a perfect circular arc? This is where the two-value syntax comes in. The first value is the horizontal radius, and the second is the vertical radius.

.element { border-radius-top-left: 20px / 10px; }

Here, the horizontal radius is 20px and the vertical radius is 10px, creating an elliptical curve. This level of control is fantastic for complex designs, but it can lead to very verbose CSS if you’re styling multiple corners.

The Shorthand: Efficiency and Elegance

This is where things get interesting, and often, where the confusion lies. The border-radius shorthand property allows you to define radii for all four corners using fewer declarations. It can accept one, two, three, or four values, and even uses a slash (/) to separate horizontal and vertical radii, just like the longhand properties.

Let’s break down the value counts:

1. One Value: border-radius: 15px; - This applies the same radius to all four corners. Easy peasy.
2. Two Values: border-radius: 15px 30px; - The first value applies to the top-left and bottom-right corners. The second value applies to the top-right and bottom-left corners. Think of it as top-left/bottom-right, then top-right/bottom-left.
3. Three Values: border-radius: 15px 30px 45px; - The first value is for top-left, the second for top-right and bottom-left (like the two-value case), and the third for bottom-right. It’s top-left, top-right/bottom-left, bottom-right.
4. Four Values: border-radius: 15px 30px 45px 60px; - This is where the true magic (and potential confusion) happens. The values are applied in clockwise order: top-left, top-right, bottom-right, bottom-left.

Now, remember the slash? It’s used to differentiate between the horizontal and vertical radii for each corner when you want elliptical curves. If you provide a slash, the values before it are horizontal radii, and the values after it are vertical radii. This can be applied to any of the one-to-four value combinations.

For example, a common shorthand with a slash looks like this:

.element { border-radius: 20px 40px / 10px 30px; }

This declaration is equivalent to:

• border-radius-top-left: 20px / 10px;
• border-radius-top-right: 40px / 30px;
• border-radius-bottom-right: 20px / 10px;
• border-radius-bottom-left: 40px / 30px;

Notice how the values before the slash (20px, 40px) are applied to the first two corners (top-left, top-right) and then repeat for the opposite corners (bottom-right, bottom-left), while the values after the slash (10px, 30px) are applied similarly. This is the most complex form, but understanding it unlocks a vast amount of creative potential. For more complex shape generation, you might also explore our Box Shadow Generator.

When you’re dealing with these complex values, especially the shorthand with the slash, visualizing the result can be tough. That’s where tools can really help. Instead of guessing and refreshing, you can use a visual editor to see the impact of your changes in real-time. For creating subtle glassmorphism effects or complex gradients, tools like our Glassmorphism Generator or CSS Gradient Generator can be incredibly useful.

The beauty of OptiPix is that all this processing happens entirely in your browser. There are no uploads, no accounts needed, and no watermarks on your generated code. You get pure, clean CSS to implement directly into your projects. It’s all about empowering you with the tools you need, privately and efficiently.

Try it free at OptiPix.art