HTML 5

Deep Dive With CSS - Border

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

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs