W3.CSSBorders

W3.CSS provides various numbers of classes for defining border of HTML elements. These are:

w3-border : The w3-border class is used to define border at all side to HTML element.

w3-border-top : The w3-border-top class is used to define border at top side to HTML element.

w3-border-bottom : The w3-border-bottom class is used to define border at bottom side to HTML element.

w3-border-left : The w3-border-left class is used to define border at left side to HTML element.

w3-border-right : The w3-border-right class is used to define border at right side to HTML element.

w3-border-0 : The w3-border-0 class is used to remove all borders to HTML element.

Example:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border"> 
I have border at all side.</h1> <br>
<h1 class="w3-panel w3-border-left"> 
I have border at left side. </h1> <br>
<h1 class="w3-panel w3-border-top w3-border-bottom"> 
I have border at top and bottom side. </h1> <br>
<h1 class="w3-panel w3-border-left w3-border-right"> 
I have border at left and right side. </h1>
</div>
</body>
</html> 
Setting Color of the border

Following two classes are for setting color of the border:

w3-border-color : The w3-border-color class is used to define color of the border to HTML element. Color needs to be specified like w3-border-khaki, w3-border-yellow etc.

w3-hover-border-color : The w3-hover-border-color class is used to define color of the border when mouse is moved over the HTML element. Color needs to be specified like w3-hover-border-red, w3-border-aqua etc.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border w3-border-lime"> 
I have lime color border at all side.</h1> <br>
<h1 class="w3-panel w3-border-left w3-border-right
w3-border-red"> 
I have red color border at left and right side. </h1> <br>
<h1 class="w3-panel w3-border-top w3-border-bottom
w3-yellow w3-border-deep-purple"> 
I have deep purple color border at top and bottom side
and yellow background color. </h1> <br>
<h1 class="w3-panel w3-border w3-border-lime w3-
hover-border-green"> 
I have lime color border at all side, green color border 
when mouse moved over me.</h1> <br>
</div>
</body>
</html>

Setting thick border

Following classes are for setting thick border:

w3-topbar : The w3-topbar class is used to define thick border at top side to HTML element.

w3-bottombar : The w3-bottombar class is used to define thick border at bottom side to HTML element.

w3-leftbar : The w3-leftbar class is used to define thick border at left side to HTML element

w3-rightbar : The w3-rightbar class is used to define thick border at right side to HTML element.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-leftbar w3-border-lime"> 
I have lime color thick border at left side.</h1> <br>
<h1 class="w3-panel w3-bottombar w3-border-red"> 
I have red color thick border at bottom side. </h1> <br>
<h1 class="w3-panel w3-topbar w3-yellow w3-border-deep-purple"> 
I have deep purple color thick border at top side and yellow background color. </h1> <br>
<h1 class="w3-panel w3-rightbar w3-border-lime w3-hover-border-green"> 
I have lime color thick border at right side, that changes 
into green color when mouse moved over me.</h1> 
<br>
</div>
</body>
</html>

Setting Rounded border

Following classes are used for setting rounded border:

w3-round : The w3-round class is used to define rounded border to HTML element.

w3-round-size : The w3-round-size class is used to define rounded border by specifying size. The size can be small, medium, large, xlarge, xxlarge.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border w3-border-lime w3-
round"> 
I have lime color rounded border.</h1> <br>
<h1 class="w3-panel w3-border w3-round-small w3-
border-red"> 
I have red color small rounded border. </h1> <br><h1 class="w3-panel w3-round-large w3-yellow w3-
border-deep-purple"> 
I have deep purple color large rounded border and 
yellow background color. </h1> <br>
<h1 class="w3-panel w3-border w3-round-xlarge w3-
border-lime"> 
I have lime color xlarge rounded border.</h1> <br>
<h1 class="w3-panel w3-border w3-round-xxlarge w3-
border-deep-purple">
I have deep purple color xxlarge rounded border. </h1>
</div>
</body>
</html>


 


CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Website development Company in Allahabad Sarkari Exam Quiz