borderstyle

Borderstyle refers to the CSS border-style property, which defines the pattern used to render the border around an element. It can be applied to all sides at once or to individual sides using the longhand properties border-top-style, border-right-style, border-bottom-style, and border-left-style, or with the shorthand border-style followed by up to four values.

The property accepts a set of keyword values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. None and hidden effectively remove the border from rendering, though hidden is sometimes used to resolve border conflicts in table layouts. The remaining values create different visual patterns, with groove, ridge, inset, and outset providing tactile, 3D-like effects that rely on shading.

Border-style works in conjunction with border-width and border-color, as well as the overall border property shorthand (border: [width] [style] [color]). The final appearance depends on all three components. If border-width is zero, the border may still be invisible even if a style is set, so width should be considered together with style for visibility.

In practice, border-style is often used to create emphasis or separation in UI elements, from simple solid lines to decorative 3D-like borders. It plays a role in accessibility and visual hierarchy, particularly when combined with focus indicators or responsive design.

See also border-width, border-color, and the border shorthand. Browser support for all standard values is robust across modern engines.