Making Rounded Corners with CSS

by kOiFiSh · Published March 1, 2015 · Updated December 28, 2015

Below we will discuss how to make rounded corners using CSS.

The HTML

A plain div, text box, and button.

<div class="rounded">
<input type="text" class="rounded"/>
<input type="button" class="rounded" text="Click"/>
</div>

The CSS

This css code will apply rounded corners to all four corners of the div, text box, and button.

.rounded
{
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

To apply the corner individually, provide four values to the border-radius property in this order: top-left, top-right, bottom-right, bottom-left.

.rounded
{
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
}

The Live Demo

Facebook