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
Selected Reading
How to specify no border in CSS
The CSS border property can add visual definition to elements, but sometimes you need to remove borders entirely. This article demonstrates how to specify no border in CSS using different techniques.
Syntax
selector {
border: none;
/* or */
border: 0;
/* or */
border-width: 0;
}
Method 1: Using border-width Property
Setting border-width: 0 makes the border invisible by reducing its width to zero
<!DOCTYPE html>
<html>
<head>
<style>
.no-border {
border-color: red;
border-style: solid;
border-width: 0;
padding: 10px;
margin: 10px 0;
}
.with-border {
border-color: red;
border-style: solid;
border-width: 2px;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h2 class="no-border">Heading with no border</h2>
<h2 class="with-border">Heading with border</h2>
</body>
</html>
The first heading appears without any border, while the second heading displays a solid red border around it.
Method 2: Using border: 0 or border: none
The border: 0 or border: none shorthand properties completely remove all border styling
<!DOCTYPE html>
<html>
<head>
<style>
.no-border-zero {
border: 0;
background-color: #f0f0f0;
padding: 15px;
margin: 10px 0;
}
.no-border-none {
border: none;
background-color: #e0e0e0;
padding: 15px;
margin: 10px 0;
}
.default-border {
border: 2px solid blue;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="no-border-zero">Element with border: 0</div>
<div class="no-border-none">Element with border: none</div>
<div class="default-border">Element with border</div>
</body>
</html>
Three div elements appear: the first two without any borders (gray backgrounds), and the third with a blue border.
Method 3: Removing Default Element Borders
Some HTML elements have default borders that can be removed using CSS
<!DOCTYPE html>
<html>
<head>
<style>
.no-border-input {
border: none;
padding: 10px;
background-color: #f9f9f9;
margin: 10px 0;
}
.no-border-table {
border: none;
border-collapse: collapse;
}
.no-border-table td {
border: none;
padding: 10px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<input type="text" placeholder="Default input" /><br>
<input type="text" class="no-border-input" placeholder="Input without border" /><br>
<table class="no-border-table">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
</body>
</html>
Two input fields appear - one with default border, one without. Below them is a borderless table with gray cells.
Conclusion
CSS offers multiple ways to remove borders: border: none, border: 0, or border-width: 0. Use border: none for complete removal or target specific properties like border-width for selective control.
Updated on: 2026-03-15T15:50:07+05:30
3K+ Views
Advertisements