$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home

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 rounde...

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

COMMENTS

Name

css,17,html,7,php,2,python,1,tech,18,
ltr
item
iWriteLess Tech Blog: Making Rounding Corners using CSS
Making Rounding Corners using CSS
https://3.bp.blogspot.com/-b6XBKKCne6s/WnoBb4UXboI/AAAAAAAABoM/sKhdlrjj8-4DfS1yWmcgJ3SrTjzhwNBNgCLcBGAs/s1600/Rounding_Corners_css.jpg
https://3.bp.blogspot.com/-b6XBKKCne6s/WnoBb4UXboI/AAAAAAAABoM/sKhdlrjj8-4DfS1yWmcgJ3SrTjzhwNBNgCLcBGAs/s72-c/Rounding_Corners_css.jpg
iWriteLess Tech Blog
http://www.iwriteless.com/2016/05/making-rounding-corners-using-css.html
http://www.iwriteless.com/
http://www.iwriteless.com/
http://www.iwriteless.com/2016/05/making-rounding-corners-using-css.html
true
2724151228810149585
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy