Introduction

On the web, rounded button corners are usually done with the CSS border-radius property. The technique is simple, but good button styling also needs sensible padding, focus styles, and a radius that matches the rest of the design system.

Start with border-radius

The minimal version looks like this:

<button class="primary-button">Save changes</button>

1.primary-button {
2  padding: 0.75rem 1.25rem;
3  border: none;
4  border-radius: 0.5rem;
5  background: #1463ff;
6  color: white;
7  font: inherit;
8  cursor: pointer;
9}

border-radius: 0.5rem; rounds all four corners equally. You can use px, rem, or any other CSS length unit, but using rem often scales better with the rest of a responsive interface.

Making the button more obviously rounded

If you want a pill-shaped button, use a large radius:

1.pill-button {
2  padding: 0.75rem 1.5rem;
3  border: none;
4  border-radius: 999px;
5  background: #111827;
6  color: white;
7}

The large value does not mean the corners literally become 999px round. The browser caps the curve based on the element's actual size, which is why this is a common way to create capsule buttons.

Control each corner separately

You can also round corners independently:

.card-action {
  border-radius: 1rem 1rem 0.25rem 0.25rem;
}

The values go in clockwise order from top-left. This is useful when the button is attached to another component and should visually align with surrounding shapes.

Keep hover and focus states intact

Rounded corners should not come at the cost of usability. Buttons still need visible interaction states:

1.primary-button:hover {
2  background: #0f4fd1;
3}
4
5.primary-button:focus-visible {
6  outline: 3px solid #8db5ff;
7  outline-offset: 2px;
8}
9
10.primary-button:active {
11  transform: translateY(1px);
12}

The focus ring is especially important. Many custom button examples remove outlines and forget to restore a keyboard-visible focus state, which is an accessibility regression.

When rounded corners do not appear

If the button still looks square, inspect the surrounding styles. Common causes include:

• a parent element clipping or masking the button,
• another selector overriding border-radius,
• a browser default border showing through,
• or an inner element with its own background covering the corners.

Using browser devtools to inspect the computed styles usually reveals the problem quickly.

Common Pitfalls

The biggest mistake is styling only the radius and ignoring spacing. A rounded corner on a cramped button usually looks accidental rather than intentional.

Another common issue is mixing very large radii with tiny button heights. The button remains technically valid, but the proportions may look awkward if the shape does not match the rest of the interface.

Do not remove borders and focus outlines without replacing them. Rounded buttons are often used in polished designs, but accessibility still matters more than minimal aesthetics.

Finally, remember that corner rounding affects the button box, not just the background color. If a child element overflows or the button contains a full-width pseudo-element, you may need overflow: hidden to clip the inner content to the rounded shape.

If the button includes an icon and text, keep the alignment and spacing balanced before adjusting the radius further. Rounded corners improve polish, but the button still needs to read as a stable clickable control first.

That is also why many design systems define a small set of approved radii, such as 4px, 8px, and pill. Consistent corner tokens produce a cleaner interface than choosing a new radius for every component.

Summary

• Use CSS border-radius to round button corners.
• Increase the radius or use 999px for pill-shaped buttons.
• Style hover, active, and focus states so the button remains usable.
• Inspect computed styles if the radius appears to have no effect.
• Match the corner radius to the button's size and the broader visual system.