Which one should we use ‘border: none’ or ‘border: 0 ‘?

Last Updated : 06 Jun, 2022

In this article, we will learn the validity of CSS border properties. We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties.

Syntax:

border: none | 0

Differences:

border: none	border : 0
For this property, the browser does not render.	For this property, the browser renders border-color and border-width properties.
Memory is occupied for this property	Memory is not occupied for this property and it saves bandwidth as compared with border:none property.

We can use border : 0 when you need your code to be simple and clear, and also there is no harm in specifying it separately.

Example 1: The following code demonstrates the CSS “border: 0” property.

HTML

<!DOCTYPE html> 
<html> 
   <body> 
      <h1 style="border-color : red ; 
                 border-style : solid ;"> 
        Without Border width 0 
      </h1> 
      <h1 style="border-color : red ; 
                 border-style : solid ; 
                 border : 0"> 
        With Border width 0[border : 0] 
     </h1> 
   </body> 
</html>

Output:

Example 2: The following code demonstrates the CSS “border: none” property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>No Border</title> 
</head> 
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <h3 style="border-color:red;border-style:solid;"> 
         Without Border width none 
    </h3> 
  
    <h3 style="border-color:red ; 
               border-style:solid ; 
               border:none"> 
        With Border [border : none] 
    </h3>          
              
</body> 
</html> 