Published on: 15 August, 2013

CSS3 Border Radius

Posted by andy | 1472 views 0 likes 0 favourites 2 comments
Tumblr Digg Google Plus

Back in old days, when we want to create a rounded border around an image or object, we usually create 4 small rounded corner image and apply the corner by using css manually. With the new feature of CSS3, this is no longer needed, it is so easy and with couple css3 lines, the rounded corners are beautifully crafted.

CSS3 Border Corners Example

1. Applying 10px border radius to all corners.

The following demo will include 10px border radius apply to each corner of the image.

demo css3 border-radius (all rounded corners)

Below is the css3 style sheet:

<style type="text/css">
.border-radius-all{
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Chrome or Safari */
	border-radius: 10px;
		
	/*** 
	Alternatively you can use the 4 points which indicate
	10px 10px 10px 10px
	Top Left, Top Right, Bottom Right, Bottom Left
		
	-moz-border-radius: 10px 10px 10px 10px;    //Firefox 
	-webkit-border-radius: 10px 10px 10px 10px; //Chrome or Safari
	border-radius: 10px 10px 10px 10px;
	***/
}
</style>
2. Second and Third examples.

The second and third examples, we will try to apply different rounded values.

demo css3 border-radius (Second example) demo css3 border-radius (Third example)

 
<style type="text/css">
.second-example{
	-moz-border-radius: 10px 40px;
	-webkit-border-radius: 10px 40px;
	border-radius: 10px 40px;

	/*** 
	Alternatively you can use the 4 points which indicate
	10px 40px 10px 40px
	Top Left, Top Right, Bottom Right, Bottom Left
		
	-moz-border-radius: 10px 40px 10px 40px;    //Firefox 
	-webkit-border-radius: 10px 40px 10px 40px; //Chrome or Safari
	border-radius: 10px 40px 10px 40px;
	***/
}
	
.third-example{
	-moz-border-radius: 40px 10px;
	-webkit-border-radius: 40px 10px;
	border-radius: 40px 10px;
	/*** 
	Alternatively you can use the 4 points which indicate
	40px 10px 40px 10px
	Top Left, Top Right, Bottom Right, Bottom Left
		
	-moz-border-radius: 40px 10px 40px 10px;    //Firefox 
	-webkit-border-radius: 40px 10px 40px 10px; //Chrome or Safari
	border-radius: 40px 10px 40px 10px;
	***/
}
</style>

Set individual property for each border radius in CSS3.

Alternatively, if you just want to specify for a specific individual corner, you can use the following format.

<style type="text/css">
.border-radius-all{
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;

	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
</style>
Comments
eleasar barraza cebreros
Commented on: 29 Mar, 2017 10:08:16 AM
muy interesante lo recomiendo
Eliasar barrazacebreroz
Commented on: 08 Aug, 2017 08:38:55 PM
Gracias
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.