IMG-LOGO

CSS3 Border Radius

andy - 15 Aug, 2013 4552 Views 2 Comment

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
29 Mar, 2017
muy interesante lo recomiendo
Eliasar barrazacebreroz
08 Aug, 2017
Gracias
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.

Related Tutorials

Media Queries

Learn how to use media queries in CSS3 Media queries are simple conditions used to targetting different devices for tables phones or desktop computers As each device may have different view size media queries become so handy to use to ...

CSS3 Multiple Column

Learn how to use multiple column property in CSS3 To create multiple columns in CSS3 is now so handy you just need to include a css built in keyword column count to do the job for you No more table ...

CSS3 Opacity

Learn how to use opacity property in CSS3. So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.

CSS3 Box Sizing

Learn how to use box sizing property in CSS3 As you know many browsers treat margin and padding differently When you combine with width or height of an element box you find out that the final dimension is completely different ...

Advanced Selectors

Learn how to use advanced selectors in CSS3. By using the built in pseudo-class, performing a selector in CSS3 is so much easy.