Border length smaller than div width?
⚡TLDR
To create a "compressed border", utilize a ::before
pseudo-element featuring position: absolute;
nested within a position: relative;
parent div
. The pseudo-element's width
should match the desired border length you wish to achieve, while its height
determines the thickness of the 'border.'
Applying this CSS to a suitably styled div
gives the appearance of a bottom border of diminished length. Adapt the width
value to adjust length, and height
to determine thickness.
Customizing your border buddy
- To center-align the border, set the
left
property and usetransform: translateX(-50%);
. - Play with the
z-index
, so our border shows up just where you want it to. - Use
max-width
not to limit our border's creativity, but rather to ensure it behaves well with different screen sizes. - The
box-shadow
can also join the party, offering a neat alternative trick to pull off with similar effects, and some pretty "radial" style too.
Shadows say, "We can mimic borders too!"
Ever considered box-shadow for a custom length border? Try this:
The box-shadow
property paves the way for creative border styles. A negative spread value helps form a sharp ending, hinting a border cut-off. Shadows do light up lives after all.
More ways to border while breaking boundaries
- Linear gradient technique: Create distinguishing border styles with background gradients for a fancy flair.
- Additional div structure: Need an alternative no matter what? An additional div just to act as the border can fill in too.
Linked
Linked
Was this article helpful?