border-style
Sets the line style of an element's border. No matter how you set border-width and border-color, no border renders without border-style. It is the property that actually makes a border appear.
Class List
border-style applies to all four sides at once. Pair it with border-width and border-color to make the border visible.
| Class | CSS | Description |
|---|---|---|
bss | border-style: solid | Solid line. The standard, most common border |
bsd | border-style: dashed | Dashed line. Signals temporary or drop areas |
bsdt | border-style: dotted | Dotted line. The lightest visual divider |
bsdb | border-style: double | Double line. Splits into two lines from 3px up |
bsh | border-style: hidden | Draws nothing, but wins border conflicts in collapsed tables |
bsnone | border-style: none | No border. Loses border conflicts in collapsed tables |
Visual Comparison
Each value is drawn with the same width (bw3px) and color (bcA1A1AA). At thin widths, dashed vs dotted and solid vs double are hard to tell apart, so compare them at 3px or more.
solid — bss
dashed — bsd
dotted — bsdt
double — bsdb
hidden — bsh
none — bsnone
Usage Patterns
| Pattern | Class | Description |
|---|---|---|
| Card default border | bss bw1px bc27272A | Combine bss with bw1px and a bc color for a thin solid card border. |
| File upload dropzone | bsd bw2px bc6366F1 | A dashed border visually communicates that the area accepts a drop. |
| Solid emphasis on focus | bss bw2px focus-bc6366F1 | Going from bsnone to bss on focus shifts the layout. Keep bss always and only change the color. |
| Hiding a table cell border | bsh | In a collapsed table, use bsh rather than bsnone to reliably erase a cell border. |
| Removing a button border | bsnone | bsnone draws nothing even when width and color are still declared. |
<!-- Card: solid + width + color -->
<div class="bss bw1px bc27272A br8px p2rem bg18181B cFAFAFA">
Card with a solid border
</div>
<!-- Dropzone: dashed -->
<div class="bsd bw2px bc6366F1 br8px p3-2rem tac cA1A1AA">
Drop files here
</div>
<!-- Keep the style, change only the color on focus -->
<input class="bss bw2px bc27272A focus-bc6366F1 py8px px16px br8px bg18181B cFAFAFA" placeholder="No layout shift" />Class Details
bssborder-style: solid
The most used value. Cards, inputs, buttons and dividers are nearly always solid. It stays a single line no matter how thick it gets.
<!-- Standard card border -->
<div class="bss bw1px bc27272A br8px p2rem bg18181B cFAFAFA">
border-style: solid
</div>
<!-- Emphasis border -->
<div class="bss bw3px bc6366F1 br8px p2rem cFAFAFA">
3px solid accent
</div>bsdborder-style: dashed
A line broken at regular intervals. Dash length and gap are chosen by the browser in proportion to the width, so they cannot be controlled precisely. Good for dropzones, temporary regions and unfinished states.
<!-- Upload dropzone -->
<div class="bsd bw2px bc6366F1 br8px p3-2rem tac cA1A1AA">
Drag and drop a file
</div>
<!-- Empty state placeholder -->
<div class="bsd bw1px bc27272A br8px p2rem tac c71717A">
No items yet
</div>bsdtborder-style: dotted
A repeating series of round dots. Visually lighter than dashed, which suits secondary dividers. Below 2px it is hard to distinguish from solid, so 2px or more is recommended.
<!-- Lightweight divider box -->
<div class="bsdt bw2px bc27272A br4px p2rem cA1A1AA">
border-style: dotted
</div>
<!-- Dotted underline only -->
<div class="bbw2px bsdt bcA1A1AA pb4px cFAFAFA">
Dotted underline
</div>bsdbborder-style: double
Drawn as two solid lines with a gap between them. The total width is split into three parts, so below 3px it looks identical to solid. Pair it with bw3px or greater to actually see the double line.
<!-- Double line needs 3px or more -->
<div class="bsdb bw6px bc6366F1 p2rem cFAFAFA">
border-style: double
</div>
<!-- Below 3px it looks like solid -->
<div class="bsdb bw2px bcA1A1AA p2rem cA1A1AA">
Looks solid at 2px
</div>bshborder-style: hidden
Like none, it draws nothing, but in a table with border-collapse set to collapse it wins any border conflict with an adjacent cell. That means the neighbour's border disappears too.
<!-- Collapsed table: hidden wins the conflict -->
<table class="bcc w100p">
<tr>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">A</td>
<td class="bsh p12px cFAFAFA">B (edges erased)</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">C</td>
</tr>
</table>bsnoneborder-style: none
The initial value: no border is drawn. Even a declared width renders nothing and occupies no space. In a collapsed table it has the lowest priority, so the neighbouring cell's border still shows.
<!-- Remove a button border -->
<button class="bsnone py8px px16px br8px bg6366F1 cFFFFFF cp">
No border
</button>
<!-- Width and color remain but nothing is drawn -->
<div class="bsnone bw3px bc6366F1 p2rem cA1A1AA">
Nothing is rendered
</div>hidden vs none
The difference when each is applied to the same table.
| bsh (hidden) | bsnone (none) | |
|---|---|---|
| Ordinary element | No border shown | No border shown (same) |
| Collapsed table | Neighbour border disappears too | Neighbour border still shows |
| Conflict priority | Highest (always wins) | Lowest (always loses) |
| Primary use | Reliably erase an edge in a table | Clearing a border on a normal element |
<table class="bcc w100p">
<tr>
<!-- hidden: this cell erases the shared edges -->
<td class="bsh p12px cFAFAFA">hidden</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">neighbour</td>
</tr>
<tr>
<!-- none: the neighbour border still shows -->
<td class="bsnone p12px cFAFAFA">none</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">neighbour</td>
</tr>
</table>Tips & Notes
Without a style, no border appears
The initial value of border-style is none, so an element with only a width and a color draws nothing. A visible border needs all three: style, width and color.
How hidden differs from none
On ordinary elements the result is identical. The difference shows up in tables with border-collapse set to collapse. When two adjacent cells declare different borders the browser must pick one, and hidden has the highest priority while none has the lowest. Give a cell hidden and that edge is never drawn, whatever the neighbour declares. Give it none and the neighbour's border still shows. To reliably erase one edge in a table, reach for bsh, not bsnone.
Combining with bw and bc
border-style only decides the shape of the line. Width comes from the bw family and color from the bc family; the three together make a complete border. Omit the color and currentColor (the text color) is used.
Thin widths hide the difference
At 1px, dashed and dotted, and solid and double, look almost the same. Use 2 to 3px or more when the value itself needs to read clearly.
Applies to all four sides — These classes set the style of all four borders at once. When sides need different line shapes, use the directional shorthand classes instead.