Header Ads Widget

Design HTML elements in different shapes using CSS border-radius property.

My codding spot May 22, 2021

 Nowadays, you can see rounded corner in image, buttons, etc.. in website or in application, Like profile picture of WhatsApp and Instagram. Round corner or whole round effects are done by border-radius property. Rounded corner shape gives different and unique look to HTML elements. This also affects your website looks. 

This post shows you different shapes design using “border-radius” property. 

border-radius property

border-radius property is CSS property which allows you to make HTML elements corner in round shape. You can apply property value in pixel (px) or in percentage (%). 

border-radius property is shorthand property of following four property. 

• border-top-left-radius property 

• border-top-right-radius property 

• border-bottom-right-radius property 

• border-bottom-left-radius property 

First we discuss about above four properties and after that discuss how border-radius property apply these four value to HTML elements. 

border-top-left-radius property 

This border-top-left-radius property set the value of top-left corner of element. 

border-top-right-radius property 

This border-top-right-radius property set the value of top-right corner of element. 

border-bottom-right-radius property 

This border-bottom-right-radius property set the value of bottom-right corner of element. 

border-bottom-left-radius property 

This border-bottom-left-radius property set the value of bottom-left corner of element. 

Example of all border-radius properties:-



 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
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.top-left,.top-right,.bottom-right,.bottom-left{
margin:50px;
height:300px;
width:500px;
background-color:slateblue;
}
.top-left{border-top-left-radius:50px;}
.top-right{border-top-right-radius:50px;}
.bottom-right{border-bottom-right-radius:50px;}
.bottom-left{border-bottom-left-radius:50px;}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="top-left">
<h2>border-top-left-radius</h2>
</div>
<div class="top-right">
<h2>border-top-right-radius</h2>
</div>
<div class="bottom-right">
<h2>border-bottom-right-radius</h2>
</div>
<div class="bottom-left">
<h2>border-bottom-left-radius</h2>
</div>
</body>
</html>
Output:-
Now lets move to the border-radius (shorthand) property. 
You can put all four top-left, top-right, bottom-left and bottom-right value in it. We understand this with example. 

Examples of border-radius property 

Following are the examples of border-radius property to set html element's in vary shape.

Example:1

In 1st example border-radius property has all four values. See in example. You can also apply only one value, this single value is consider for all corners of element. 

Code:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.example1{
margin:50px;
height:300px;
width:500px;
background-color:slateblue;
border-radius:30px;}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="example1">
<h2>border-radius of all corner 30px</h2>
</body>
</html>
Output :-

Example:2

In 2nd example the border-radius property has two values. 
From these two values, first value make (30px) round shape on the top-left and bottom-right corners of an element. 
The second value (65px) make round shape on the top-right and bottom-left corners of an element. 

Code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.example2{
margin:50px;
height:300px;
width:500px;
background-color:slateblue;
border-radius:30px 65px;}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="example2">
<h2>border-radius:30px 65px</h2>
</body>
</html>
Output:-

Example:3

Here in 3rd example there are three values. 

First value makes (30px) round shape at only top-left  corner. 
Second value makes (55px) round shape at top-right and bottom-left corners. 
And the third value makes (20px) round shape at bottom-right corner. 

Code:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.example3{
margin:50px;
height:300px;
width:500px;
background-color:slateblue;
border-radius:30px 55px 20px;}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="example3">
<h2>border-radius:30px 55px 20px</h2>
</body>
</html>
Output:-
Example:4

In 4th example I have assigns four different values to border-radius property. 

First value (30px) apply to top-left corner of element. 
Second value (55px) apply to top-right corner of element. 
Third value (20px) apply to bottom-right corner of element. 
Last value (75px) apply to bottom-left corner of element. 

Code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.example4{
margin:50px;
height:300px;
width:500px;
background-color:slateblue;
border-radius:30px 55px 20px 75px;}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="example4">
<h2>border-radius:30px 55px 20px 75px</h2>
</body>
</html>
Output:-

Example:5

Now another way to make rounded corner of an HTML element. The corners are not fully rounded. 
It is elliptical. It is done by putting slash (“/”) between two values. 
First value represents the horizontal radius value and second value represents the vertical radius value. Let’s see the example. 

Code:- 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.example5{
height:300px;
width:300px;
background-color:red;
border-radius:20px/50px;
}
h2{
padding:20%;
text-align:center;
}
</style>
</head>
<body>
<div class="example5">
<h2>border-radius:20px/50px</h2>
</body>
</html>
Output:-

For this type of shapes , from horizontal or vertical radius values, one value is small and one is large. 
Like above example, horizontal radius is 20px which is smaller than vertical radius that is 50px. Here arc has develop at  vertical line. 
If you want this arc at horizontal line exchange these two radius values with each other. See the following code and it’s output. 

Code:-


1
2
3
4
5
6
.example5{
height:300px;
width:300px;
background-color:red;
border-radius:50px/20px;
}
Output:-

Now, how to make whole round shape of an Elements? 

As you can see the default shape of any HTML elements (like buttons, div, image, etc.. ) is usually in square shape.
 If you want them in round shape assign value to border-radius is half of element’s height and width. And both value of height and width is same.

Code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>border-radius</title>
<style>
.round{
height:400px;
width:400px;
background-color:lime;
border-radius:200px;
}
</style>
</head>
<body>
<div class="round"></div>
</body>
</html>
Output:-

If height and width are different than set border-radius value to 50% . It makes elliptical shape of an element. 

Code:-

1
2
3
4
5
6
.round{
height:300px;
width:400px;
background-color:lime;
border-radius:50%;
}
Output:-

Note:- Most of the browser not support border-radius property.     But for browser support add prefix with -webkit- and -moz-. 

For example, -webkit-border-radius:30px;
                         -moz-border-radius:35px;

The following example of border-radius property shows the <div> elements in different shapes. 


 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
       <title>div tag border radius</title>
<style>
   .main{
       position:absolute;
       height:500px;
       width:500px;
       margin:200px;
       background-color:skyblue;
       }
   #bdrrd1{
             position:absolute;
             height:300px;
             width:300px;
             margin:100px;
             border:1px solid black;
             border-radius:150px;
             background-color:#ffccee;
                }
   #bdrrd2{
             position:absolute;
             height:200px;
             width:200px;
             margin-left:10px;
             margin-top:10px;
             border:1px solid black;
             border-radius:20px;
             background-color:#ffccee;
                }
   #bdrrd3{
             position:absolute;
             height:200px;
             width:200px;
             margin:300px;
             border:1px solid black;
             border-radius:0px 100px 0px 0px;
             background-color:#ffccee;
                }
    #bdrrd4{
             position:absolute;
             height:200px;
             width:200px;
             margin-left:300px;
             border:1px solid black;
             border-radius:0px 100px 0px 100px;
             background-color:#ffccee;
                }
      #bdrrd5{
             position:absolute;
             height:200px;
             width:200px;
             margin-top:300px;
             border:1px solid black;
             border-radius:0px 0px 100px 100px;
             background-color:#ffccee;
                }
</style>
</head>
<body>
     <div class="main">
     <div id="bdrrd1"></div>
     <div id="bdrrd2"></div>
     <div id="bdrrd3"></div>
     <div id="bdrrd4"></div>
     <div id="bdrrd5"></div>
     </div>
</body>
</html>
Output:-
Conclusion: 

Use of border-radius property is simple. By just adjust it’s radius value you can get your desire shape and make look of element unique. 
Remember:- when border-radius property is in use make sure that background-color or border is applied to element.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments