Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add rounded corners to a button with CSS?
To add rounded corners to a button, use the border-radius property. This property allows you to control the curvature of your button corners, creating a more modern and polished appearance.
Syntax
button {
border-radius: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the radius in px, em, rem, etc. |
% |
Defines the radius as a percentage of the button's dimensions |
50% |
Creates a circular button (if width equals height) |
Example: Basic Rounded Button
You can try to run the following code to add rounded corners −
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 15px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Rounded Button Example</h2>
<button class="button">Click Me</button>
</body>
</html>
A green button with rounded corners (15px radius) appears. The button has white text "Click Me" and changes to a darker green on hover.
Example: Circular Button
Here's how to create a perfectly circular button −
<!DOCTYPE html>
<html>
<head>
<style>
.circular-button {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff6b6b;
color: white;
border: none;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2>Circular Button</h2>
<button class="circular-button">+</button>
</body>
</html>
A red circular button with a white "+" symbol appears, perfectly round due to the 50% border-radius.
Conclusion
The border-radius property is essential for creating modern button designs. Use pixel values for consistent rounding or percentage values for responsive circular buttons.
Updated on: 2026-03-15T12:52:49+05:30
3K+ Views
Advertisements