How to Add Rounded Corners to a Button with CSS

Buttons are one of the most interactive and essential elements on any website or application. While their functionality is crucial, their design can significantly impact user experience. One simple way to make buttons more visually appealing is by adding rounded corners.

In this blog, we’ll show you how to use CSS to create buttons with smooth, rounded corners that look modern and elegant.

---

🎯 Why Use Rounded Corners?

Rounded corners can:

• Make buttons look softer and more approachable.
• Improve aesthetics for mobile and modern UI designs.
• Align better with brand guidelines or material design principles.

---

🧱 The CSS Property: border-radius

The border-radius property in CSS is used to round the corners of an element’s outer border edge. It accepts values in pixels (px), percentages (%), or other length units.

---

✅ Basic Syntax

selector {
  border-radius: value;
}

---

🔧 Example: Add Rounded Corners to a Button

HTML

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

CSS

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

Result: A button with slightly rounded corners.

---

🎨 Experiment with border-radius Values

Value	Description
border-radius: 0px;	Sharp corners (default)
border-radius: 5px;	Slightly rounded corners
border-radius: 20px;	More rounded, pill-like appearance
border-radius: 50%;	Fully circular (used for icons)

Example: Pill-Shaped Button

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

---

📱 Responsive Tip

Use relative units like em or % to ensure corner radius scales with different screen sizes.

.button-responsive {
  border-radius: 1em;
}

---

🧠 Bonus: Combine with Hover Effects

Enhance the design further with transitions or color changes:

.rounded-btn:hover {
  background-color: #45a049;
  transition: background-color 0.3s ease;
}

---

🧪 Live Demo (CodePen / JSFiddle)

Want to test it out? Try your code in an online editor like CodePen or JSFiddle.

---

🔚 Conclusion

Adding rounded corners to a button is easy with just a single line of CSS using the border-radius property. Whether you want subtle curves or full pill shapes, this technique can dramatically improve the visual appeal of your buttons.

Design is in the details—and rounded corners are a small touch that makes a big difference.