Button rounded corners CSS

In this article, we will see about button with rounded corners in CSS.

What are rounded corners?

The corners don’t have a sharp edges, it have slightly rounded shape is called rounded corners. By setting the rounded corner you will get user attraction.

How to create rounded corners in button

We can use the border-radius property to specify the all four sides border-radius. The value you give to border-radius property will apply to all sides.
Ex:

<!-- 50%px border radius -->
<button style="border-radius: 50%;">50%</button>
<!-- 12px border radius -->
<button style="border-radius: 8px;">12px</button>
<!-- 8px border radius -->
<button style="border-radius: 8px;">8px</button>
<!-- 5px border radius -->
<button style="border-radius: 5px;">5px</button> 
<!-- 5px border radius -->
<button style="border-radius: 2px;">2px</button>

Output:

In the above code, we have 5 buttons with different borders. The first button has a 50% border radius, so it display rounded shape. The second button has a 12px border radius, so it display round with square shape button. The third button has an 8px border-radius, so it displays a slightly square button. The fourth button has a 5px border-radius and the last button have a 2px border-radius, so it display fully square button. We can also give % a percentage value to the border-radius property.

How to set border-radius to a specific side

We can also apply the border-radius to the specific sides like left, right, top, and bottom. All border-radius can be given value as px, %, em, etc.

1. Top-left

We can use CSS “border-top-left-radius” property to specify the border top left radius.

2.Top-right:

We can use CSS “border-top-right-radius” property to specify the border top right radius.

3. Bottom-left:

We can use CSS “border-bottom-left-radius” property to specify the border-bottom left radius.

4. Bottom-right:

We can use CSS “border-bottom-right-radius” property to specify the border-bottom right radius.

EX:

<button style="border-top-left-radius: 50em;">top-left</button>
<button style="border-top-right-radius: 50em;">top-right</button>
<button style="border-bottom-left-radius: 50em;">bottom-left</button>
<button style="border-bottom-right-radius: 50em;">bottom-right</button>

Output:

In the above code, we have the four button with different specific side border-radius. The first button has a 50em border-radius on top-left, the second button has a 50em border-radius on the top-right, the third button has a 50em border-radius on bottom-left, and the first button has a 50em border-radius on bottom-right. See the above given output, it have