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
Thanks for sharing this code.