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>


 


Programs

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