Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 



Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads