How to Add Rounded Corners to a Button with CSS

Rounded corners are a small but powerful touch that can greatly enhance the look and feel of buttons on your website. With just a single CSS property—border-radius—you can transform sharp-edged buttons into smooth, modern UI elements that feel more polished and user-friendly.

In this post, we’ll walk you through how to add rounded corners to a button using CSS, along with best practices and styling tips.

Table of Contents

🎯 The `border-radius` Property

The CSS border-radius property controls the roundness of an element’s corners. It works on all HTML elements, but it’s most commonly used on buttons, cards, and input fields.

Syntax:

selector {
  border-radius: value;
}

The value can be specified in px, %, em, or other CSS units.
Higher values produce more rounded corners.

🧪 Basic Example: Adding Rounded Corners to a Button

Here’s a simple button with slightly rounded corners:

<button class="rounded-btn">Click Me</button>

.rounded-btn {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

This will create a smooth, rounded edge around the button.

📐 Using Different `border-radius` Values

You can fine-tune how much rounding you want:

Slightly rounded: border-radius: 4px;
Fully rounded (pill-shaped button): border-radius: 9999px;
Circular button (equal width and height): border-radius: 50%; .circle-btn { width: 50px; height: 50px; border-radius: 50%; }

🎨 Rounded Corners with Custom Styling

Add transitions, hover effects, or shadows for a polished UI:

.rounded-btn {
  background: #28a745;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  border: none;
  transition: background 0.3s ease;
}

.rounded-btn:hover {
  background: #218838;
}

🧩 Extra Control: Per-Corner Rounding

You can also apply rounding to specific corners:

border-top-left-radius: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0;

This lets you create unique shapes or styles for asymmetric designs.

✅ Best Practices

Use px for precise control; use % for responsive or circular shapes.
Stick with border-radius: 4px–12px for modern, accessible UI designs.
Use consistent radius values across your UI for visual harmony.

📝 Final Thoughts

Adding rounded corners to buttons in CSS is simple but impactful. With just the border-radius property, you can modernize your design, improve user experience, and create a consistent, attractive UI. Whether you’re building a landing page or a mobile app interface, rounded buttons are a must-have in your styling toolkit.

🎯 The border-radius Property