Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we display the thickness of the border of an element in HTML?
The border thickness in HTML elements can be controlled using CSS properties. While the legacy border attribute was used in older HTML versions for tables, it has been deprecated in HTML5. The modern approach uses CSS border-width, border-style, and border-color properties to define border appearance and thickness.
Syntax
Following is the syntax for setting border thickness using CSS −
border-width: value; border: width style color;
Where value can be specified in pixels (px), ems (em), or keywords like thin, medium, and thick.
Using CSS Border Properties
The CSS border-width property controls the thickness of an element's border. You can set different thicknesses for each side using individual properties like border-top-width, border-right-width, border-bottom-width, and border-left-width.
Example − Different Border Widths
Following example demonstrates various border thickness values −
<!DOCTYPE html>
<html>
<head>
<title>Border Thickness Example</title>
<style>
.thin-border { border: 1px solid black; margin: 10px; padding: 10px; }
.medium-border { border: 5px solid blue; margin: 10px; padding: 10px; }
.thick-border { border: 10px solid red; margin: 10px; padding: 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="thin-border">Thin border (1px)</div>
<div class="medium-border">Medium border (5px)</div>
<div class="thick-border">Thick border (10px)</div>
</body>
</html>
The output shows three boxes with different border thicknesses −
Thin border (1px) (black thin border) Medium border (5px) (blue medium border) Thick border (10px) (red thick border)
Legacy Border Attribute (Deprecated)
The HTML border attribute was commonly used with table elements to set border thickness. However, this attribute is deprecated in HTML5 and should be avoided in modern web development.
Example − Legacy Border Attribute
Following example shows the deprecated border attribute usage −
<!DOCTYPE html>
<html>
<head>
<title>Legacy Border Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cricketers</h2>
<table style="width:100%" border="2">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>India</td>
</tr>
<tr>
<td>Virat Kohli</td>
<td>India</td>
</tr>
</table>
</body>
</html>
Note − While this still works in browsers, it is deprecated and should not be used in modern HTML5 development.
Modern CSS Approach for Tables
Instead of the deprecated border attribute, use CSS to style table borders with precise control over thickness, style, and color.
Example − CSS Table Borders
Following example demonstrates the proper way to add borders to tables using CSS −
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Borders</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 2px solid #333;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cricketers</h2>
<table>
<caption>Indian Cricket Players</caption>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>Batsman</td>
</tr>
<tr>
<td>Virat Kohli</td>
<td>Batsman</td>
</tr>
</table>
</body>
</html>
The output displays a properly formatted table with 2px borders and collapsed border spacing −
Cricketers Indian Cricket Players Name | Role ------------------|---------- Sachin Tendulkar | Batsman Virat Kohli | Batsman (All cells have 2px solid borders with gray headers)
Border Width Keywords and Values
CSS provides several ways to specify border thickness −
Example − Border Width Options
<!DOCTYPE html>
<html>
<head>
<title>Border Width Options</title>
<style>
.border-demo {
margin: 15px 0;
padding: 15px;
border-style: solid;
border-color: #2196F3;
}
.keyword-thin { border-width: thin; }
.keyword-medium { border-width: medium; }
.keyword-thick { border-width: thick; }
.pixel-value { border-width: 8px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="border-demo keyword-thin">Thin border (keyword)</div>
<div class="border-demo keyword-medium">Medium border (keyword)</div>
<div class="border-demo keyword-thick">Thick border (keyword)</div>
<div class="border-demo pixel-value">8px border (pixel value)</div>
</body>
</html>
The output shows different border thickness approaches using keywords and pixel values −
Thin border (keyword) (approximately 1px blue border) Medium border (keyword) (approximately 3px blue border) Thick border (keyword) (approximately 5px blue border) 8px border (pixel value) (exactly 8px blue border)
Individual Side Border Thickness
You can set different thickness values for each side of an element's border using individual CSS properties.
Example − Individual Border Sides
<!DOCTYPE html>
<html>
<head>
<title>Individual Border Sides</title>
<style>
.custom-borders {
margin: 20px;
padding: 20px;
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-style: solid;
border-color: #4CAF50;
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="custom-borders">
This box has different border thickness on each side:
<br>Top: 1px, Right: 5px, Bottom: 10px, Left: 15px
</div>
</body>
</html>
The output shows a box with progressively thicker borders on each side, creating a distinctive visual effect.
Comparison of Border Methods
| Method | HTML5 Support | Flexibility | Recommended |
|---|---|---|---|
HTML border attribute |
Deprecated | Limited (tables only) | No |
CSS border-width
|
Full support | High (all elements) | Yes |
CSS border shorthand |
Full support | High (all elements) | Yes |
| Individual side properties | Full support | Very high | Yes |
Conclusion
Border thickness in HTML5 should be controlled using CSS properties like border-width or the border shorthand. The deprecated HTML border attribute should be avoided. CSS provides precise control over border appearance with keywords (thin, medium, thick) or exact pixel values, and allows different thickness for each side of an element.
228 Views
