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.
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
Leave A Comment?