CSS Rounded Corners: How to Style Element Edges

Rounded corners are one of the most common visual touches on a web page. They soften boxes, buttons, images, and cards, and they often make a layout feel cleaner and easier to read. In CSS, this effect comes from a single property: border-radius.

This guide explains how the property works, the different ways to write its values, how to round only one corner, how to build shapes like circles and pills, and how to fix the most common problems people run into. By the end, you will be able to round any element precisely and understand why a corner sometimes refuses to curve.

What Is the border-radius Property?

border-radius defines how far the corners of an element curve inward. You give it a length value, such as 8px, 1rem, or 2em, or a percentage. The browser then draws a curve of that size at each corner.

The curve applies to the element’s outer box. Any border follows the curve, and any background color or background image is clipped to the same rounded shape. If the element has a drop shadow, the shadow follows the rounded outline too.

Almost every element accepts it: containers, buttons, images, form fields, sections, and media elements. A few special cases, such as tables with collapsed borders, behave differently, and those are covered below.

Basic Syntax and Value Order

The property accepts anywhere from one to four values, and the order matters.

One Value: All Four Corners

.box {
  border-radius: 12px;
}

All four corners receive the same 12-pixel curve.

Two Values: Opposite Corners

The first value applies to the top-left and bottom-right corners. The second value applies to the top-right and bottom-left corners.

.box {
  border-radius: 20px 4px;
}

This creates a shape that is rounded on two opposite corners and nearly square on the other two.

Three Values

The first value sets the top-left corner. The second sets the top-right and bottom-left. The third sets the bottom-right.

Four Values

Four values are read clockwise, starting from the top-left: top-left, top-right, bottom-right, then bottom-left.

.box {
  border-radius: 8px 8px 0 0;
}

That example rounds only the top two corners, which is a common style for tabs and cards.

Rounding One Corner at a Time

If you prefer to be explicit, four longhand properties control each corner on its own:

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

These are useful when a single corner needs a different value, or when a stylesheet changes one corner and you want the change to be obvious in the code.

Percentages and Elliptical Corners

Percentage Values

Percentages are relative to the element’s own size. The horizontal radius is calculated from the element’s width, and the vertical radius from its height. On a square element, border-radius: 50%; produces a perfect circle. On a rectangle, the same value produces an oval because the two dimensions are different.

The Slash Syntax

You can also give each corner a different horizontal and vertical curve. Separate the two sets of values with a slash. Everything before the slash sets the horizontal radii; everything after sets the vertical radii.

.ellipse {
  border-radius: 100px / 50px;
}

This produces a wide, flat curve that is 100 pixels across and 50 pixels tall. You can also use one to four values on each side of the slash, following the same corner order described earlier.

Common Shapes You Can Build

• Soft cards and panels: a radius between 8px and 16px is usually enough to look modern without being distracting.
• Pill-shaped buttons: use a radius of about half the element’s height, or a very large value such as 9999px.
• Circles: set border-radius: 50%; on an element with equal width and height.
• Ovals: the same 50% value on a rectangle that is wider than it is tall.
• Leaf and teardrop shapes: mix large and zero values, for example border-radius: 50% 0 50% 0;.

Rounded Corners on Images and Media

For a simple photo, apply the radius directly to the image element:

img {
  border-radius: 10px;
}

If the image sits inside a frame that has its own background or border, round the container instead and add overflow: hidden so the image is trimmed to the same shape.

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

This pattern also works for embedded players, maps, and any element whose contents would otherwise spill past the corners.

How Rounding Affects Borders, Backgrounds, and Shadows

A border added to a rounded element wraps smoothly around the curve, including borders with different widths or colors on each side. Background colors and background images are clipped to the rounded shape by default, so you do not need extra rules. Shadows follow the rounded outline as well, which means a card with a soft shadow looks correct without any additional styling.

Clipping Content Inside Rounded Corners

The border-radius property rounds the element’s own box, but it does not automatically hide child elements that extend past the corners. Adding overflow: hidden to the parent trims them.

Keep one caution in mind: overflow: hidden also cuts off anything designed to sit outside the parent, such as a dropdown menu or a tooltip. Use it when you actually want the contents clipped, and look for an alternative when you do not.

Rounded Corners on Tables

Tables are a frequent exception to the rules above. When border-collapse: collapse is set, the table’s borders are drawn by the table itself rather than by the individual cells, and the corners often stay square no matter what radius you apply.

To fix it, switch to border-collapse: separate and set border-spacing: 0. You can then apply the radius to the table, and wrap the table in a container with overflow: hidden if the corners still look uneven.

Matching Inner and Outer Corners

When a padded box sits inside a rounded container, matching the two radii exactly can make the inner corners look either too tight or too loose. A simple rule of thumb works well: the inner radius should equal the outer radius minus the padding.

If the outer container uses 16px and the padding is 8px, the inner element should use 8px. This keeps the visual curve consistent across the two layers.

Animating Corner Radius

The radius can be transitioned or animated like most other properties.

.button {
  border-radius: 6px;
  transition: border-radius 0.2s ease;
}

.button:hover {
  border-radius: 24px;
}

Keep the change modest. Large, fast jumps in the curve can feel distracting rather than polished.

Browser Support

border-radius is supported in all modern browsers without vendor prefixes. Very old browsers required prefixes for the property, but that is rarely a concern today. Percentage values, the slash syntax, and individual corner properties are also widely supported, so you can use them freely in normal projects.

Troubleshooting Common Issues

• Corners stay square on an image or video: the radius may be applied to the wrong element. Apply it to the visible box, or add overflow: hidden to the parent container.
• A child element pokes out of a corner: add overflow: hidden to the rounded parent so the contents are trimmed.
• Table corners look wrong: change border-collapse to separate and set the spacing to zero.
• A percentage radius looks stretched: percentages scale with width and height, so a non-square element produces an oval. Use a fixed pixel value for an even curve.
• The radius appears to do nothing: check for a conflicting rule or a shorthand that resets the value, and confirm the element has a visible background, border, or content.
• The curve looks slightly rough: this is usually a rendering detail on very small radii or low-resolution screens rather than a code problem.

Quick Reference

• All four corners: border-radius: 10px;
• Two values: first for top-left and bottom-right, second for top-right and bottom-left
• Four values: read clockwise from the top-left
• Circle: border-radius: 50%; on a square element
• Ellipse: border-radius: 50% / 25%;
• Pill shape: border-radius: 9999px;
• Trim overflowing children: overflow: hidden;

Conclusion

Rounded corners in CSS come down to one property. Use a single value for an even curve, two to four values for individual corners, percentages for circles and ovals, and the slash syntax when you need an elliptical shape. Remember that the radius rounds the element’s box but does not hide overflowing children, so pair it with overflow: hidden when contents need trimming, and adjust for tables with collapsed borders.

With those basics in place, you can shape buttons, cards, images, and containers confidently. If you would like to keep building on this topic, explore related guides on spacing, shadows, borders, and overall page layout to round out your styling toolkit.