TechBlazing.com logo
Web Development

CSS Border Radius: How to Round Corners in Web Design

Riley Tanaka 7 min read

Rounded corners are one of the first things anyone learns in CSS, and one of the things most people never fully explore. A single border-radius declaration can carve a perfect circle, build a pill-shaped button, turn a plain rectangle into an organic blob, or clip an image without ever opening an image editor. It can also cause shadows that look cut off, background colors that bleed through borders, and outlines that refuse to follow the curve.

This guide covers the whole property in plain language, and the following sections break it down piece by piece:

  • What border-radius actually changes on the box model
  • One-value, two-value, three-value, and four-value syntax
  • Percentages, circles, and why 50% is not always round
  • Elliptical corners with the slash syntax
  • Shaping buttons, cards, avatars, and media
  • Clipping images and content with overflow
  • Shadows, borders, and focus rings that behave
  • Animating corners smoothly
  • Performance and compatibility notes

What border-radius Actually Does

Borders in CSS are drawn along the edge of the element’s box. border-radius tells the rendering engine to draw that edge as a curve instead of a straight line, starting a defined distance away from each corner. The radius is the size of the imaginary circle used to round that corner.

The key detail: the property does not crop content. It reshapes the border and the background. Anything inside the element — text, images, nested boxes — still occupies the full rectangular box unless you explicitly clip it. That single fact explains most of the confusion people run into later.

The Basic Syntax

One value applies the same radius all the way around:

.card {
  border-radius: 12px;
}

Add more values and you start controlling corners individually. The order runs clockwise from the top-left corner.

  • Two values: top-left and bottom-right, then top-right and bottom-left. border-radius: 20px 4px;
  • Three values: top-left, then top-right and bottom-left, then bottom-right. border-radius: 20px 4px 20px;
  • Four values: top-left, top-right, bottom-right, bottom-left. border-radius: 20px 4px 20px 4px;

You can also target a single corner directly with the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. These are useful when one corner needs a different value than the rest, and they accept the same units.

Percentages, Circles, and the Half-Size Rule

Pixels give you absolute control, but percentages scale with the element. That is how circular avatars work: set equal width and height, then apply 50%.

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

Here is the catch most people miss. A percentage radius is calculated against the corresponding dimension — horizontally against the width, vertically against the height. On a square box that produces a circle. On a wide rectangle, 50% produces an ellipse stretched along the longer side.

There is also an automatic safety valve built in: if the combined radii on one side exceed the length of that side, the browser scales all the values down proportionally until they fit. That is why a pill button can use an absurdly large value and still round perfectly:

.pill {
  padding: 12px 28px;
  border-radius: 9999px;
}

Elliptical Corners With the Slash Syntax

For asymmetric curves, border-radius accepts two sets of values separated by a slash. The first set defines the horizontal radius, the second defines the vertical radius.

.leaf {
  border-radius: 0 100% 0 100%;
}

.blob {
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

The first example creates a classic leaf or petal shape. The second produces an organic blob — experiment with the numbers and you get a soft, hand-drawn look without touching an illustration tool. Blobs like this are a fast way to add personality to hero sections and empty states.

Clipping Images and Content

Because border-radius does not crop children, applying it to a container full of content leaves square-cornered children poking out. The fix is to pair it with clipping:

.media {
  border-radius: 16px;
  overflow: hidden;
}

.media img {
  display: block;
  width: 100%;
  height: auto;
}

This is the standard recipe for rounded thumbnails, video frames, and card headers. Watch out for one side effect: overflow: hidden also clips anything meant to escape the box, such as a tooltip or a dropdown that needs to extend past the edge.

Shadows, Borders, and Focus Rings

Box shadows follow the rounded shape automatically, so a soft shadow hugging a curved card needs no extra work. Outlines also follow the curve in current browsers, which means focus states now match the shape of your component instead of showing a rectangle. That is a genuine accessibility win — the focus indicator finally lines up with what the user sees.Borders are where things get subtle. If an element has a semi-transparent background and a visible border, the background can show through underneath the border edge, creating a muddy ring. Restricting how far the background paints solves it:

.ghost {
  background: rgb(0 0 0 / 0.08);
  border: 2px solid #333;
  border-radius: 12px;
  background-clip: padding-box;
}

Also remember that the border is drawn inside the rounded edge. Adding a thick border to a heavily rounded element reduces the usable interior space, which can squeeze text closer to the curve than expected.Animating Corners

Radius values interpolate smoothly, which makes them great for subtle micro-interactions. Growing the radius slightly on hover can make a button feel softer and more inviting, and morphing between two blob shapes gives a section gentle motion.

.button {
  border-radius: 8px;
  transition: border-radius 180ms ease, transform 180ms ease;
}

.button:hover {
  border-radius: 18px;
  transform: translateY(-2px);
}

Keep animations short and purposeful. Constantly morphing large shapes forces the engine to repaint significant areas, so reserve heavy rounding animations for small components.

Performance and Compatibility Notes

Support for border-radius is universal in modern browsers, and vendor prefixes are a thing of the past. You do not need fallbacks for basic rounding.There are still two practical performance caveats:

  • Static radius is cheap. A fixed curved edge renders once and stays.
  • Animated radius is not. Changing the curve every frame repaints the element and its shadow. For large or numerous elements, prefer moving the element with transform and leaving the radius alone.

Combining a very large radius with overflow: hidden on a long scrolling container can also hurt frame rates on lower-powered devices, because the clipping region has to be recalculated as content moves.

Quick Recipes to Steal

  • Soft card: border-radius: 16px with a subtle shadow.
  • Pill button: generous horizontal padding plus border-radius: 9999px.
  • Circle avatar: equal width and height plus border-radius: 50%.
  • Leaf accent: border-radius: 0 100% 0 100%.
  • Organic blob: slash syntax with uneven percentages.
  • Rounded media: radius plus overflow: hidden on the wrapper.

Start with one radius value and build from there. Reach for the slash syntax only when a shape genuinely needs it, and always check how shadows, borders, and focus states behave at the value you chose — that is where rounded corners go from decorative to polished.

Border radius rewards a little experimentation more than almost any other property in CSS. Change one number, refresh, and the whole personality of a component shifts. Keep tweaking, keep testing on real devices, and the shapes you build will feel intentional instead of default. For more hands-on breakdowns of the tools and techniques shaping the modern web, keep exploring TechBlazing.