Making Rounded Corners with CSS

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

 

You may also like...

1 Response

  1. Maria Mincey says:

    Thanks for sharing this code.

Leave a Reply

Your email address will not be published. Required fields are marked *