Deep Dive With CSS - Border

In this article, you will learn, how to use border property to apply border style on HTML element.

In CSS, border property is used to enable a border around HTML element and border property also has the different property 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 HTML element, border-style property is used. 
 
Syntax

selected_element
{
border-style:style_type;
}
 
type of style are listed below.
  • dotted

    To define 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 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 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 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, 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, border-width property is used.
  • We can define a border with in px, pt, cm, em, etc.
  • We can also used 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 border color of HTML element, border-color property is used 
 
In CSS, we can define the color, using-
  • Name of the color.
  • Hex value of the color.
  • RGB value of the color.
Example 1

In this example, we will use 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 HTML element, 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