Making Rounded Corners with CSS

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



A plain div, text box, and button.

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



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

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.

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 *