How to create a Button with Rounded Corners using CSS

In CSS3 you can give elements rounded corners with the border-radius property. Let’s look at an example of this.

Suppose you have the following markup.

<div class="red_div"></div>

To make the div visible, we’ll set its width and height and give it a background color of red.

.red_div {
  background-color: red;
  width: 200px;
  height: 100px;
}

The following is the resulting output of the above.

To make the div’s borders rounded, you could add the following styling:

border-radius: 15px;

The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

Below you can see the result of the above markup.

The border-radius property can be written in several ways.

Specifying one value for the property will set all four edges of the element to a radius of that value.

border-radius: 15px 15px;

With two values, the first will be applied to the top-left and bottom-right corner while the second is applied to the top-right and bottom-left corners

border-radius: 15px 15px 15px;

With three values, the first will be used for the top-left corner, the second value for the top-right and bottom-left corners, and the third value will be applied to the bottom-right corner.

border-radius: 15px 15px 15px 15px;

The above explicitly sets a value for each edge. The above is a shorthand for the below CSS, which also eplicitly gives a value for each edge.

border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

In the example we’ve looked at, we set the same value for all edges. You can of course set different values for each edge if you so wish.

border-radius: 5px 25px;

Adding Rounded Corners to Buttons

border-radius can be used on other elements as well. Below, we see it used to add rounded corners to a button.

<button>Button</button>

button {
  width: 200px;
  height: 100px;
  border-radius: 20px;
}

The button will look like this:

Here are some more examples of complete buttons