CSS Border

CSS border is a key property used to characterize and style the borders around HTML components. Borders assume a vital part in website composition, assisting with making separation, emphasis, and stylish allure. In CSS, you can utilize a few border-related properties to control the style, variety, size, and shape of these borders. In this article, we will investigate these CSS border properties and how to really utilize them.

CSS Border Properties

The CSS border properties are utilized to determine the style, variety, width, and ebb and flow of the borders of a component. These properties include:

border-style
border-color
border-width
border-radius

1) CSS border-style

The Border style property is used to specify the border type which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

Value	Description
none	It doesn't define any border.
dotted	It is used to define a dotted border.
dashed	It is used to define a dashed border.
solid	It is used to define a solid border.
double	It defines two borders wIth the same border-width value.
groove	It defines a 3d grooved border. effect is generated according to border-color value.
ridge	It defines a 3d ridged border. effect is generated according to border-color value.
inset	It defines a 3d inset border. effect is generated according to border-color value.
outset	It defines a 3d outset border. effect is generated according to border-color value.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      width: 150px; 
      height: 30px; 
      margin: 10px;
      padding: 10px;
    }

    .dotted {
      border: 2px dotted #FFA500;
    }

    .dashed {
      border: 2px dashed #008000;
    }

    .solid {
      border: 2px solid #000;
    }

    .double {
      border: 4px double #FF0000;
    }

    .groove {
      border: 3px groove #3333FF;
    }

    .ridge {
      border: 3px ridge #660066;
    }

    .inset {
      border: 3px inset #006600;
    }

    .outset {
      border: 3px outset #990000;
    }
  </style>
</head>
<body>
  <div class = "border-example dotted"> Dotted Border </div>
  <div class = "border-example dashed"> Dashed Border </div>
  <div class = "border-example solid"> Solid Border </div>
  <div class = "border-example double"> Double Border </div>
  <div class = "border-example groove"> Groove Border </div>
  <div class = "border-example ridge"> Ridge Border </div>
  <div class "border-example inset"> Inset Border </div>
  <div class = "border-example outset"> Outset Border </div>
</body>
</html>

Output:

2) CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.

Note: The border-width property isn't utilized alone. It is constantly utilized with other border properties like "border-style" property to set the border first any other way it won't work.

<!DOCTYPE html>
<html>
<head>
<style>
  /* CSS for different border widths */
  .thin-border {
    border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */
  }

  .medium-border {
    border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */
  }

  .thick-border {
    border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */
  }

  .custom-border {
    border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */
  }
</style>
</head>
<body>

<!-- HTML elements with different border widths -->
<p class = "thin-border"> Thin Border </p>
<p class = "medium-border"> Medium Border </p>
<p class = "thick-border"> Thick Border </p>
<div class = "custom-border"> Custom Border </div>

</body>
</html>

Output:

3) CSS border-color

There are three strategies to set the color of the border.

Name: It determines the color name. For instance: "red".
RGB: It determines the RGB worth of the color. For instance: "rgb(255,0,0)".
Hex: It determines the hex worth of the color. For instance: "#ff0000".

Note: The border-color property isn't utilized alone. It is constantly utilized with other border properties like "border-style" property to set the border first any other way it won't work.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  .my-element {
    width: 200px;
    height: 100px;
    border: 2px solid #333; /* The Initial border color is dark gray */
    transition: border-color 0.5s; /* Adding a smooth transition effect */
  }

  .my-element:hover {
    border-color: blue; /* This changes the border color to blue when hovering */
  }
</style>
</head>
<body>
  <div class = "my-element"> Hover </div>
</body>
</html>

Output: