CSS Border Style & Border Radius Generator


 Explore Border Styles
Preview








Border Radius

Border Radius property allows developers to define how rounded the border corners are,

.borderStyleClass {
	border-radius : 40px 40px 40px 40px ;
}												
								

Here, the 4 values set are for –

1. Top Left Corner
2. Top Right Corner
3. Bottom Right Corner
4. And Bottom Left Corner

Higher the value, more rounded are the corners.



Border Style

Border Style property has wider options which can be applied to borders. Border Style contains,

1. Border Radius
2. Border Width
3. Border Style – Can be solid, dashed, ridge, inset, dotted or double
4. Border Color

.borderStyleClass {
	border-radius : 40px 40px 40px 40px ;
	border-width : 3px 8px 3px 8px ;
	border-style : dashed ridge dashed ridge;
	border-color : rgba(179,102,179,1) rgba(127,84,184,1) rgba(179,102,179,1) rgba(128,84,184,1) ;
}												
								

For all the properties, 4 values are set in sequence. Top, right, bottom and left.



Browser Support

CSS Property Chrome IE Mozilla Safari Opera
border-radius 5.0 / 4.0 -webkit- 9.0 4.0 / 3.0 -moz- 5.0 / 3.1 -webkit- 10.5
border-style 1.0 4.0 1.0 1.0 3.5