Ways to define CSS border-radius with 3 examples
Quick Reach
How to define the border radius?
The CSS border-radius property sets the rounding of the borders of the specified element. The round may be circle or ellipse. You can set the border-radius in the single declaration by using: e.g.
border-radius: 15px;
>>See A border-radius example by single declaration
Or by using specific border side like top left, or top right, bottom left or bottom right separately: e.g.
border-top-left-radius: 10px;
border-top-right-radius: 20px;
The examples below shows both ways of using the border-radius i.e setting the radius of borders in one declaration and separately.
A Short Video on border-radius property
Setting circular border radius with short-hand
This example sets the border radius of all sides for a div element by single declaration using the border-radius CSS property.
Experience this example online
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<html> <head> <style> /*Using CSS border*/ .div_ex { border-style: solid; border-color: #FF5599; border-radius: 15px; border-width: 5px; } </style> </head> <body> <div>This is Div element border-radius in single declaration. <br /> This is Div element border-radius in single declaration.<br /> This is Div element border-radius in single declaration. </div> </body> </html> |
Setting border radius for each corner in circle
This example sets the border radius of all sides separately by using the border-radius properties in the div element. Following border-radius properties are used:
- border-top-left-radius;
- border-top-right-radius;
- border-bottom-left-radius;
- border-bottom-right-radius;
Experience this example online
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <style> /*Using CSS border*/ .div_ex1 { border-style: solid; border-color: #FF5599; border-width: 5px; border-top-left-radius: 10px; border-top-right-radius: 15px; border-bottom-left-radius: 10px; border-bottom-right-radius: 15px; } </style> </head> <body> <div>This is Div element with top, bottom, left and right border specification <br /> This is Div element with top, bottom, left and right border specification <br /> This is Div element with top, bottom, left and right border specification </div> </body> </html> |
Setting ellipsis border radius with horizontal and vertical values example
Experience this example online
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html> <head> <style> /*Using CSS border*/ .div_ex { border-style: solid; border-color: #FF5599; border-width: 5px; border-radius: 0.5em 1em; } </style> </head> <body> <div>This is Div element with horizontal and vertical value for border-radius <br /> This is Div element with horizontal and vertical value for border-radius <br /> This is Div element with horizontal and vertical value for border-radius </div> </body> </html> |
You can see, the value in CSS border radius is specified for vertical and horizontal values to make ellipsis border.
Further Reading: CSS border | CSS border color
Related
2 Examples to set CSS border styles: Solid, Dotted, Dashed etc.
CSS word wrap – 2 examples to wrap or no-wrap text
CSS border: 3 Examples to Style Borders in div, table
CSS Padding: Explained With 4 Online Examples
How to use CSS border color property with 3 examples
3 examples of CSS text-decoration with underline, overline and links
Setting CSS Table Border with Collapse and other Properties
CSS Class – Creating and using CSS classes