CSS border-style Property

The border-style property defines the visual appearance of an element's border line. It is the most critical border property because without a defined style, the border defaults to none and will not be visible regardless of width or color.

selector { border-style: value; }
none Specifies that no border is drawn and the computed width is forced to zero.
hidden Prevents the border from being drawn and resolves conflicts in collapsed table borders.
dotted Renders the border as a series of round dots.
dashed Renders the border as a series of short rectangular line segments.
solid Renders a single, continuous, and opaque line.
double Renders two parallel solid lines with a clear gap between them.
groove Renders a 3D effect that looks like a channel is carved into the page surface.
ridge Renders a 3D effect that looks like a raised ridge popping out of the page surface.
inset Renders a 3D effect that makes the entire element look embedded in the page.
outset Renders a 3D effect that makes the entire element look embossed or popping out.

Code Examples

A basic example showing a single dashed border style applied to all sides of a div.

<div style="border-width: 5px; border-style: dashed; border-color: #ff8800; padding: 20px;">
  This box has a dashed orange border.
</div>

An advanced example using JavaScript to dynamically toggle between solid and double border styles on mouse hover.

<div id="uiCard" style="border: 4px solid #333333; padding: 20px; transition: border 0.3s;">
  Move your mouse over this card to change the border style.
</div>

<script>
const card = document.getElementById("uiCard");
card.onmouseover = function() {
  this.style.borderStyle = "double";
  this.style.borderColor = "#007bff";
};
card.onmouseout = function() {
  this.style.borderStyle = "solid";
  this.style.borderColor = "#333333";
};
</script>

Pro Tip

You can mix styles on different sides to create unique effects. For example, setting border-style: solid none solid none; creates a clean top and bottom bar effect for headers or footers without requiring extra HTML wrappers. You can also use the double style with a thick border-width to create an elegant 'picture frame' look with a single line of CSS.

Deep Dive

Think of border-style as the texture of the frame around your content box. You can supply between one and four values to control different sides. If you provide one value, it applies to all four sides. Two values apply to the top/bottom then left/right. Three values apply to the top, then left/right, then bottom. Four values follow the clock: top, right, bottom, left. While solid is the standard, 3D styles like groove, ridge, inset, and outset rely heavily on the border-color to calculate the light and shadow shades that create the illusion of depth.

Best Practices

Always explicitly define a border-style if you want a border to appear. For most modern 'flat' user interfaces, stick to solid. If you only need to change the style of a specific side, use the specific longhand properties like border-top-style to make your intentions clear to other developers reading your code.

Common Pitfalls

The most common mistake is setting a border-width and border-color but forgetting to set the border-style. Since the default is none, your border will be invisible. Another trap is the hidden value in tables; if you use border-collapse: collapse, a style of hidden on one cell will override any other border styles on adjacent cells.

Accessibility

Borders provide essential visual boundaries for interactive elements like buttons and form inputs. Avoid removing borders on focus states without providing a high-contrast alternative. Keyboard users need these visual cues to know which element currently has focus. Also, ensure the border-color provides enough contrast against the background so users with low vision can see the shape of the element.

Dev Data Table: border-style property

default none
animatable no
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderStyle = "dashed";
js_syntax_2 element.style.setProperty("border-style", "dashed");
js_note When manipulating this property through JavaScript, remember that you can pass one to four values in a single string to affect different sides.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "3.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }
results render here...