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
Create a bordered list without bullets using CSS
To create a bordered list without bullets, you can use the list-style-type property set to none to remove bullets and add a border property to create the border around the list.
Syntax
ul {
list-style-type: none;
border: width style color;
padding: value;
}
Example
The following example creates a bordered list without bullets −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: orange;
padding: 10px 20px;
list-style-type: none;
border: 2px solid black;
width: 200px;
}
li {
padding: 5px 0;
}
</style>
</head>
<body>
<p>Countries</p>
<ul>
<li>India</li>
<li>US</li>
<li>Australia</li>
</ul>
</body>
</html>
A bordered orange list appears with no bullets containing "India", "US", and "Australia" with black border and proper spacing.
Conclusion
The list-style-type: none property removes bullets from lists, while the border property adds visual boundaries. Combine with padding for better spacing and appearance.
Updated on: 2026-03-15T12:13:39+05:30
343 Views
Advertisements