Search within TutorialsPark

CSS Border-Radius


Use CSS border-radius property create rounded corners for element borders .


CSS Border-Radius

1. The CSS border-radius property to create borders with rounded corners.

2. The curved corners are created by specifying the radius for the rounded corners. Radius values can be specified using either length(px, em, cm) or percent( % ) .

Tables: Properties of CSS Border-Radius

Property Description
border-top-left-radius Set the border radius for top-left corner
border-top-right-radius Set the border radius for top-right corner
border-bottom-left-radius Set the border-radius for bottom-left corner
border-bottom-right-radius Set the border-radius for bottom-right corner
border Shorthand to set border-radius for all the side in a single declaration


CSS Border-Radius for Individual Borders

border-radius-for-each-side

1. You can create curved border corners for individual sides using CSS individual border-radius properties, as given in the table above.

2. Values can be a single value( for both width and height) or double value(seperate value for width and height) expressed in either length(px, em, cm) or percent( % ). The default value is zero .

Example: CSS Border-Radius for Individual Corners

Give it a TRY! » Note: For two radius values, the first sets the horizontal radius of quarter ellipse and second sets the vertical radius of quarter ellipse.


CSS Shorthand Border Radius

Demo: CSS Border Radius(shorthand)

I have never let my schooling interfere with my education.

border-radius:


1.You can specify border for all four corners of the box in a single declaration using CSS shorthand border-radius

2. The order to define shorthand border-radius is beginining from top-left corner and going clockwise

3. You can specify seperate horizontal and vertical values using the symbol " / " to seperate them.

CSS Example : border-radius(shorthand)

Give it a TRY! » Note: You need not have same number of values before and after the slash.


CSS Border-Radius with Background Images

Demo: CSS Border Radius with Background Image

border-radius:


1.You can use the border-radius property to create curved corners to elements with a background image, the image gets clipped at the corners and the background image get visible.

Example: CSS border-radius for background images

Give it a TRY! »


CSS Border-Radius with Background Images

The reports of my death have been greatly exaggerated.

border-style:


1.You can use the border-type property to create very good effects with border-radius.

Example: CSS border-radius for different border-types

Give it a TRY! »