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>

Qus. 1 : W3.CCS does not provides the following border class.

w3-border-top
3-border-right
w3-border-bottom
w3-border-gutter

Qus. 2 : W3.CSS does not provides the following border class:

w3-border-top
w3-border-right
w3-border-bottom
w3-border-gutter

Qus. 3 : Which property is used to create border in w3.css

w3-border
w3.border
w3.-border
None of these

O Level Online Exam

Programs