border-style

by

border-style is a CSS property that defines the style of an element’s border.

It allows you to create various border effects, such as solid lines, dotted lines, dashed lines, double lines, groove effects, ridge effects, inset effects, and outset effects.

It can be applied to any element that can have a border, including <div>, <p>, <span>, and many others.

Syntax

border-style: <value>;

Where <value> can be one of the following:

  • solid: Creates a solid line border.
  • dotted: Creates a dotted line border.
  • dashed: Creates a dashed line border.
  • double: Creates a double line border.
  • groove: Creates a 3D-like grooved border.
  • ridge: Creates a 3D-like ridged border.
  • inset: Creates a 3D-like inset border.
  • outset: Creates a 3D-like outset border.

Example

<div style="border: 2px solid red;">This is a div with a solid red border.</div>

This code creates a <div> element with a 2-pixel-wide solid red border.

Additional Notes

  • You can combine the border-style property with other border properties like border-width and border-color to customize the appearance of your borders.
  • For more complex border effects, you can use the border-top-style, border-right-style, border-bottom-style, and border-left-style properties to specify different styles for each side of the border.

Example with Multiple Styles

<div style="border: 2px solid red; border-top-style: dotted; border-bottom-style: dashed;">
    This div has a solid red border on the sides, a dotted border on the top, and a dashed border on the bottom.
</div>