Border style

Border styles TailwindCSS v4 doesn't expose, and per-side control it doesn't offer. Set border-groove on the whole box, or border-t-dashed and border-b-dotted on one side each.

Browser support

No relative color syntax and no @property registrations of our own. The physical and all-sides utilities are plain border-*-style declarations and work wherever Tailwind itself does; the axis and logical utilities add the logical properties, and the logical pair border-s-* and border-e-* also use :dir() to resolve which physical side they land on.

Tailwind's own ltr: and rtl: variants are not used for that, because they also match [dir="ltr"] *, which reaches through a nested dir="rtl" and would apply both directions at once. :dir() matches inherited directionality instead, so it resolves per element.

Quick reference

class	styles
border-groove	border-style: groove
border-ridge	border-style: ridge
border-inset	border-style: inset
border-outset	border-style: outset
border-t-solid	border-top-style: solid
border-t-dashed	border-top-style: dashed
border-t-dotted	border-top-style: dotted
border-t-double	border-top-style: double
border-t-groove	border-top-style: groove
border-t-ridge	border-top-style: ridge
border-t-inset	border-top-style: inset
border-t-outset	border-top-style: outset

Basic usage

The four 3D styles apply to the whole box. TailwindCSS ships border-solid, border-dashed, border-dotted and border-double already; these are the four it leaves out:

groove

ridge

inset

outset

Per side

Apply different border styles to individual sides:

border-t-dashed

border-b-dotted

border-l-double

Mixed styles

Combine multiple per-side styles for decorative effects:

Different style on each side

Available styles

solid

dashed

dotted

double

groove

ridge

inset

outset

Side variants

Prefix	Sides	CSS Property
t	Top	border-top-style
r	Right	border-right-style
b	Bottom	border-bottom-style
l	Left	border-left-style
x	Left + Right	border-inline-style
y	Top + Bottom	border-block-style
s	Inline start	border-inline-start-style
e	Inline end	border-inline-end-style

Axis variants

border-x-dashed

border-y-dotted

Logical variants

The logical variants (s and e) follow writing direction. In LTR layouts s is left and e is right; in RTL they swap. They resolve per element, so a dir="rtl" subtree inside an LTR page swaps only inside that subtree.

border-s-double

border-e-ridge

Composition

Layering over a whole-box style

A side utility overrides a whole-box style on that side alone, whether the whole-box style is one of these or one of TailwindCSS's own:

groove, ridge on top

dashed, groove on top

With a per-side colour

Style and colour are set independently per side, so TailwindCSS's own border-t-<color> composes with these. A red dashed top on an otherwise blue border:

border-t-red-500 border-t-dashed

border-t-red-500 border-t-groove

The 3D styles take their light and dark faces from the border colour, so border-t-groove above bevels in red while the other three sides stay flat blue.

Width utilities keep the style

Every TailwindCSS border-width utility also re-asserts a border style, so a width that lands after the style in the cascade would otherwise reset it. Each side keeps its own style through that, including when the width arrives in a variant that sorts later:

hover: top stays groove

hover: start stays ridge

Applying conditionally

Hover and focus states

Prefix a border style utility with a state variant like hover:* to only apply it in that state:

Hover to change top border to dashed

Using a custom value

Arbitrary values need the explicit border-style: type hint. A bare border-[groove] is read as a colour by TailwindCSS's own border utility, so the hint is what routes the value to the style instead:

border-t-[border-style:groove]

Using a custom variable

For CSS variables, use the typed bare-value syntax:

border-t-(border-style:--my-style)

Utility	Type hint	Example
border	border-style	border-(border-style:--my-style)
border-<side>	border-style	border-t-(border-style:--my-style)

Import

Included in @import 'tw-jib-css'. To import individually:

@import 'tw-jib-css/border-style';

This entry carries none of the library's color machinery, because these utilities read no color. Taking it costs you nothing but the border styles below. See take only what you need.

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.