+917803057266

Home » Tips & Tricks » Understand the use of Border in CSS

Understand the use of Border in CSS

1.. All Side Thick Borders

A div element with a border


.allborder{
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;
}

2.. Square Border


.bordernospace{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;
}]

3.. Hide Left Border


.noleftborder{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: none;
border-right: 20px solid green
}

4.. Top Right Border Hide Bottom Border


.nobottomborder{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: none;
border-right: 20px solid green;
}

5.. Top Right Border


.onlytoprightborder{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid #f6f6f6;
}

6.. Top Right Border – Large


.onlytoprightborderlarge{
font-size: 0px; line-height: 0%; width: 100px;
border-top: 20px solid red;
border-right: 20px solid #f6f6f6;
}

7.. Thicker Right Border


.topbottomrightborder{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-right: 40px solid green;
}

8.. Thicker Right Border and Thinner Top Bottom Border


.topbottomthinnerrightborderthicker{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid red;
border-bottom: 10px solid #fc0;
border-right: 40px solid green;
}

9.. Down Arrow


.downarrow{
font-size: 0px; line-height: 0%; width: 0px;
border-top:20px solid #AAA;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
}

10.. Up arrow


.uparrow{
font-size: 0px; line-height: 0%; width: 0px;
border-bottom:20px solid #AAA;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
}

11.. Left arrow


.leftarrow{
font-size: 0px; line-height: 0%; width: 0px;
border-left:20px solid #AAA;
border-top:10px solid #FFF;
border-bottom:10px solid #FFF;
}

12.. Right arrow


.rightarrow{
font-size: 0px; line-height: 0%; width: 0px;
border-right:20px solid #AAA;
border-bottom:10px solid #FFF;
border-top:10px solid #FFF;
}

13.. Hourglass


.hourglass{
font-size: 0px; line-height: 0%; width: 0px;
border-top:20px solid #AAA;
border-bottom:20px solid #AAA;
border-right:10px solid #FFF;
border-left:10px solid #FFF;
}

14.. Sideways Directions


.sidewaysdirection{
font-size: 0px; line-height: 0%; width: 0px;
border-left:20px solid #AAA;
border-right:20px solid #AAA;
border-top:10px solid #FFF;
border-bottom:10px solid #FFF;
}