Post
Ask Question

Deep Dive With CSS - Border

Introduction

 
In CSS, border property is used to enable a border around HTML element and border property also has different properties to change the border like color, style, and width.
 
CSS Border Properties 
 
CSS Border Properties are used to create a border to a particular element and it also defines the boundary of the element.
 
 
Border Style
 
 To define the type of the border, which is applied to the HTML element, the border-style property is used. 
 
Syntax
 
selected_element
{
border-style:style_type;
}
 
The type of style is listed below.
  • dotted
     
    To define a dotted border style, dotted border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: dotted;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • solid
     
    To define a solid border style, dotted border style is used. 
     
     Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: solid;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • dashed
     
    To define the dashed border style, dashed border style is used. 
     
     Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: dashed;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • double
     
    To define the double border style, double border style is used. 
     
     Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: double;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     

  • groove
     
     To define 3D grooved border style, groove border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: Groove;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • hidden
     
    To define hidden border style, hidden border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: hidden;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     

  • none
     
    To define no border, no border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: none;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     

  • inset
     
    To define 3D inset border style, inset border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: inset;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • outset
     
    To define 3D outset border style, an outset border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: outset;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     
     
  • ridge
     
    To define 3D ridged border style, ridge border style is used. 
     
    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <style>  
    6.         h1 {  
    7.             border-style: ridge;  
    8.         }  
    9.     </style>  
    10. </head>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15.   
    16. </html>  
    Output
     

Border Width
  • To define the width of the border, the border-width property is used.
  • We can define a border within px, pt, cm, em, etc.
  • We can also use three pre-defined values: thin, medium, or thick. to define border width.
Syntax
 
selected_element
{
border-width:value; 
}
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             border-style: solid;  
  8.             border-width: 5px;  
  9.         }  
  10.     </style>  
  11. </head>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16.   
  17. </html>  
Output
 
  We also define the border width, using different units like-
  • border-width:medium
  • border-width:thin
  • border-width:thik
Border Color
 
To define the border color of the HTML element, the border-color property is used 
 
In CSS, we can define the color, using-
  • Name of the color.
  • Hex value of the color.
  • The RGB value of the color.
Example 1
 
In this example, we will use the name of the color.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             border-style: solid;  
  8.             border-color: red;  
  9.         }  
  10.     </style>  
  11. </head>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16.   
  17. </html>  
Output
 
 
Example 2
 
In this example, we will use RGB value of the color. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             border-style: solid;  
  8.             border-color: rgb(255, 0, 0);  
  9.         }  
  10.     </style>  
  11. </head>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16.   
  17. </html>  
Output
 
 
Example 3
 
In this example, we will use Hex value of the color. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             border-style: solid;  
  8.             border-color: #FF0000;  
  9.         }  
  10.     </style>  
  11. </head>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16.   
  17. </html>  
Output
 
 
Rounded Borders
 
To define a rounded border of the HTML element, the border-radius property is used. 
 
Syntax
 
selected_element\
{
border-radius:value; 
} 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             border-style: solid;  
  8.             border-color: #FF0000;  
  9.             border-radius: 10px;  
  10.         }  
  11.     </style>  
  12. </head>  
  13.   
  14. <body>  
  15.     <h1>c# corner</h1>  
  16.     <p>c-sharpcorner.com</p>  
  17.   
  18. </html>  
Output
 
 

Conclusion

 
In this article, we studied CSS - Border.


Similar Articles