askvity

How Do You Define the Style of an Element Border in CSS?

Published in CSS Borders 3 mins read

You define the style of an element border in CSS primarily using the border-style property.

The border-style CSS property sets the line style for all four sides of an element's border. It can also be used to set the style for individual sides (border-top-style, border-right-style, border-bottom-style, border-left-style).

Common Border Styles

CSS provides several predefined values for the border-style property. Based on the provided reference, here are some of the most common ones:

  • dotted: Defines a dotted border.
  • dashed: Defines a dashed border.
  • solid: Defines a solid border.
  • double: Defines a double border.
  • groove: Defines a 3D grooved border. This effect depends on the border-color value.
  • ridge: Defines a 3D ridged border. This effect depends on the border-color value.
  • inset: Defines a 3D inset border. This effect depends on the border-color value.
  • outset: Defines a 3D outset border. This effect depends on the border-color value.
  • none: Defines no border.
  • hidden: Defines a hidden border (similar to none but can affect layout in some cases).

Visual Examples of Border Styles

Style Description Example Display (Conceptual)
dotted Dotted line . . . . . . . . . . .
dashed Dashed line - - - - - - - - - - -
solid Single solid line ---------------------
double Double solid lines =====================
groove 3D groove effect (Visual effect)
ridge 3D ridge effect (Visual effect)
inset 3D inset effect (Visual effect)
outset 3D outset effect (Visual effect)

Note: The appearance of 3D styles (groove, ridge, inset, outset) is influenced by the border color.

Applying Border Styles in CSS

You can set the border style using the border-style property with one or more values.

Examples

  1. Setting the same style for all four sides:
    selector {
  border-style: solid; /* Applies a solid border to all sides */
}
  2. Setting different styles for different sides (top, right, bottom, left):
    selector {
  border-style: dotted dashed solid double; /* Top: dotted, Right: dashed, Bottom: solid, Left: double */
}
  3. Using individual side properties:
    selector {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
}

While border-style defines the look of the line, remember that borders also have border-width (thickness) and border-color (color). Often, these are set together using the shorthand border property:

selector {
  border: 2px solid blue; /* Shorthand: width, style, color */
}

Understanding the various border-style options allows you to create visually distinct borders for your web elements.

For more details on CSS borders and their properties, you can refer to resources like W3Schools CSS Border.

Related Articles