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>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: dotted;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output
  • solid
    To define a solid border style, dotted border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: solid;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output
  • dashed
    To define the dashed border style, dashed border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: dashed;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output
  • double
    To define the double border style, double border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: double;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output

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

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

  • inset
    To define 3D inset border style, inset border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: inset;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output
  • outset
    To define 3D outset border style, an outset border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: outset;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    16. </html>
    Output
  • ridge
    To define 3D ridged border style, ridge border style is used.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. h1 {
    7. border-style: ridge;
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    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>
  4. <head>
  5. <style>
  6. h1 {
  7. border-style: solid;
  8. border-width: 5px;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  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>
  4. <head>
  5. <style>
  6. h1 {
  7. border-style: solid;
  8. border-color: red;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  17. </html>
Output
Example 2
In this example, we will use RGB value of the color.
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. h1 {
  7. border-style: solid;
  8. border-color: rgb(255, 0, 0);
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  17. </html>
Output
Example 3
In this example, we will use Hex value of the color.
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. h1 {
  7. border-style: solid;
  8. border-color: #FF0000;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  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>
  4. <head>
  5. <style>
  6. h1 {
  7. border-style: solid;
  8. border-color: #FF0000;
  9. border-radius: 10px;
  10. }
  11. </style>
  12. </head>
  14. <body>
  15. <h1>c# corner</h1>
  16. <p>c-sharpcorner.com</p>
  18. </html>
Output

Conclusion

In this article, we studied CSS - Border.