Border Style
Set border styles on individual sides. TailwindCSS v4 provides border-solid, border-dashed, etc. for all four sides at once, but doesn't expose per-side control — this module fills that gap.
Import
Included in @import 'tw-jib-css'. To import individually:
css
@import 'tw-jib-css/border-style';Quick Reference
| Class | Styles |
|---|---|
| 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 |
| border-t-none | border-top-style: none |
| border-t-hidden | border-top-style: hidden |
| border-r-<style> | border-right-style: <style> |
| border-b-<style> | border-bottom-style: <style> |
Basic Usage
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) respect writing direction — in LTR layouts, s is left and e is right. In RTL, they swap.
border-s-double
border-e-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