Borders
Presence, direction, width, color, and radius — plus a named responsive form for directional borders that exists alongside the documented arbitrary-value one.
Presence & direction
border-x/border-y (both sides on an axis) exist alongside the four single-side classes, undocumented until now:
Responsive directional borders — a named form, not just arbitrary
Beyond the documented arbitrary form (border-top-[2px_dashed_red]), every side also has a plain named responsive form that adds/removes the default 1px border at a breakpoint:
<div class="border-top-md">1px top border from md up</div>
<div class="border-top-md-0">removes it from md up</div>Width & color
border-1…5 and border-{color} only work on top of an existing border
border-3 is just border-width: 3px, border-danger is just border-color: var(--st-danger) — neither touches border-style. Without a border (or border-top, etc.) already establishing border-style: solid somewhere, both are invisible: a width or color with no style is exactly as visible as no border at all. That's why these two demos keep the baseline border, unlike the ones above.border-opacity-* is dead — verified, not a rendering quirk
border-opacity-10 through border-opacity-75 exist and set --st-border-opacity, but nothing reads that variable back — same broken pattern as bg-opacity-* (Colors) and text-opacity-* (Typography). Use an arbitrary border color with an alpha value instead: border-[1px_solid_rgba(220,53,69,0.5)].Radius
Both the plain radius scale and the per-side radius classes are responsive; the arbitrary form (rounded-[8px_8px_0_0]) is too, including per-side arbitrary (rounded-top-[8px_8px_0_0]).
No !important form anywhere in this group
!important variant — not border, not rounded, not shadow. If you need to force one over a component style, reach for the arbitrary form, which does support the ! prefix: !rounded-[8px].