May 06, 2016

Making Rounding Corners using CSS

Here we will see how to enhance content box border using CSS 3 border-radius property. Border-Radius properties allows you to add a rounded borders to the elements. The following example is to show how to create All Rounded Corners, Individual Corners and Circle by specifying a different radius size.

To create All Rounder Corners you may specify only one value for the border-radius property

CSS:
border-radius : 40px;

To create an Individual corners rounded we need to specify a radius size to border-top-left, border-bottom-right and border-bottom-left propertis

CSS:
border-top-left-radius : 50px;
border-bottom-right-radius : 50px;

A circle may be created by  specifying the border-radius property to an exact half of the size of a square content box.

CSS: border-radius : 65px;

1) Create an HTML document with three div content boxes

<div id="box-1"><p>All Rounded Corners</p></div>
<div id="box-2"><p>Individual Corners</p></div>
<div id="box-3"><p>Circle</p></div>

2) Create a style sheet containing a rule to enhance the content boxes and then save the HTML document.

div { float : left ; margin : 10px ; height : 120px ;
width : 120px ; border : 4px solid black ; text-align : center }

3) Now lets make a colorful background by adding a rule to color background property and then uniformly round all corners using border-radius property.

div#box-1 { background : orange ; border-radius : 40px }

4) Add a rule to color the background and then individually round the corners.

div#box-2 { background : pink ;
border-top-left-radius : 50px
border-bottom-right-radius : 50px }

5) Lastly, add a rule to color the background and make it circular box.

div#box-3 { background-color : yellow ; border-radius : 65px }

6) Now, save the HTML document and the style sheet. You can now check it by opening the web page in a browser.

RESULT

All Rounded Corners
Individual Corners
Circle

No comments :

Post a Comment