How to Add Rounded Corners to a Button with CSS

Rounded corners can give your buttons a modern, smooth, and user-friendly appearance. With just a single CSS property, you can completely transform the look of a basic HTML button.

In this blog post, you’ll learn how to add rounded corners to a button using CSS, with step-by-step examples and practical tips to customize your design.

---

✅ The Key Property: border-radius

The border-radius property in CSS is used to round the corners of elements—including buttons.

📌 Syntax:

button {
  border-radius: value;
}

• value can be in px, %, em, etc.
• A higher value means more rounded corners.

---

💡 Basic Example

✅ HTML:

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

✅ CSS:

.rounded-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px; /* Rounded corners */
  cursor: pointer;
}

✅ Output: A clean, rectangular button with soft 8px rounded edges.

---

🎯 Fully Rounded / Pill Button

To make a pill-shaped or fully rounded button:

.rounded-pill {
  border-radius: 50px;
}

Or use:

border-radius: 9999px;

Example:

<button class="rounded-btn rounded-pill">Sign Up</button>

✅ This works best for buttons with equal height and border-radius values.

---

🧪 Button with Different Corner Styles

You can also round specific corners using:

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

Example:

.custom-rounded {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

This creates a unique, asymmetrical shape.

---

📱 Responsive Rounded Buttons

Rounded corners adapt well to all screen sizes, but you can fine-tune them for smaller devices using media queries:

@media (max-width: 600px) {
  .rounded-btn {
    border-radius: 4px;
  }
}

---

🧠 Summary

Task	CSS Code Example
Basic rounded corners	border-radius: 8px;
Pill-style button	border-radius: 9999px;
Round specific corners	border-top-left-radius: 20px;
Responsive adjustment	Use media queries

---

✅ Final Thoughts

Adding rounded corners to buttons is a simple yet powerful way to enhance your web design. Whether you’re going for a subtle rounded edge or a fully pill-shaped button, the border-radius property gives you full creative control with minimal code.

Rounded buttons not only look modern—they also feel more approachable and touch-friendly, making them a great choice for both desktop and mobile interfaces.