Skip to content
Related Articles

Related Articles

Improve Article

CSS | Borders

  • Difficulty Level : Easy
  • Last Updated : 03 Jul, 2021

CSS border properties allow us to set the style, color, and width of the border. 
Note: Different properties can be set for all the different borders i.e.top border, right border, bottom border and left border. 
Properties of CSS Borders :  

1. Border Style: The border-style property specifies the type of border. None of the other border properties will work without setting the border style. 
Following are the types of borders:
*dotted – Defines a dotted border 
*dashed – Defines a dashed border 
*solid – Defines a solid border 
*double – Defines a double border 
*groove – Defines a 3D grooved border. 
*ridge – Defines a 3D ridged border. 
*inset – Defines a 3D inset border. 
*outset – Defines a 3D outset border. 
*none – Defines no border 
*hidden – Defines a hidden border
Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p.dotted {
            border-style: dotted;
        }
         
        p.dashed {
            border-style: dashed;
        }
         
        p.solid {
            border-style: solid;
        }
         
        p.double {
            border-style: double;
        }
    </style>
</head>
 
<body>
 
    <h2>The border-style Property</h2>
     
<p>Geeksforgeeks</p>
 
 
    <p class="dotted">A dotted border.</p>
 
    <p class="dashed">A dashed border.</p>
 
    <p class="solid">A solid border.</p>
 
    <p class="double">A double border.</p>
 
 
</body>
 
</html>

Output: 

2. Border Width: Border width sets the width of the border . Width of the border can be in px, pt, cm or thin, medium and thick.
Example: 



html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid;
            border-width: 8px;
        }
    </style>
</head>
 
<body>
     
<p>
        Geeksforgeeks</p>
 
     
<p>
        Border properties
    </p>
 
</body>
 
</html>

Output: 

3. Border Color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid;
            border-color: red
        }
    </style>
</head>
 
<body>
     
<p>
        Geeksforgeeks</p>
 
     
<p>Border properties:color
    </p>
 
</body>
 
</html>

Output: 

4. Border individual sides: Individual sides can be set with different properties. 
Syntax: If border properties have 4 values then. 

border-style: solid dashed dotted double
Solid: top border
Dashed: right border
Dotted: bottom border
Double: left border

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid dashed dotted double;
            border-color: red;
        }
    </style>
</head>
 
<body>
     
<p>Geeksforgeeks</p>
 
     
<p>
        Border properties:color
    </p>
 
</body>
 
</html>

Output: 



Syntax: If border properties have 3 values then:
 

border-style: solid dotted double
Solid:top border
Dotted: Left and right border
Double: bottom border

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid dashed dotted;
            border-color: blue;
        }
    </style>
</head>
 
<body>
     
<p>Geeksforgeeks</p>
 
     
<p>
        Border properties:color
    </p>
 
</body>
 
</html>

Output: 

Syntax: If border properties have 2 values

border-style:solid dotted
Solid:top and bottom border
Dotted: right and left border

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid dashed;
            border-color: blue;
        }
    </style>
</head>
 
<body>
     
<p>Geeksforgeeks</p>
 
     
<p>
        Border properties:color
    </p>
 
</body>
 
</html>

Output: 

Syntax: If border properties has 1 value

border-style:dotted
Dotted:top, bottom, left and right border

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid;
            border-color: green;
        }
    </style>
</head>
 
<body>
     
<p>Geeksforgeeks</p>
 
     
<p>
        Border properties:color
    </p>
 
</body>
 
</html>

Output: 

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
     

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :