CSS Border Style

In CSS, you can control the style of an element's border using the border-style property.

The border-style property accepts one or multiple values, and each value represents the style of the border on a particular side of the element. The possible values for border-style are as follows:

• solid: The border is a solid line.
• dashed: The border is a series of dashes.
• dotted: The border is a series of dots.
• double: The border is two solid lines.
• groove: The border looks as though it is carved into the page.
• ridge: The border looks as though it is coming out of the page.
• inset: The border looks like it is embedded into the page.
• outset: The border looks like it is coming out of the page.
• none: No border. (This is the default value).
• hidden: Same as "none", except in terms of border conflict resolution for table elements.

You can apply border-style to an element like this:

        
            div {
   border-style: solid;
   width: 200px;
   height: 100px;
}
        
    

This will give the element a solid border on all four sides.

If you want to apply different border styles to different sides of the element, you can use the individual properties for each side: border-top-style, border-right-style, border-bottom-style, and border-left-style.

        
            div {
  border-style: solid; /* All sides */
  border-top-style: dashed; /* Top side */
  border-right-style: dotted; /* Right side */
  border-bottom-style: double; /* Bottom side */
  border-left-style: inset; /* Left side */
  width: 200px;
  height: 100px;
}