Cascade FallsISSUE #15 of 33

borders · width · style · color

StylaVSThe Specificity Sphinx

Styla saysborder sets an element’s edge with three parts: width, style, and color.

The shorthand border: 1px solid #b388ff sets all three. You can target one side (border-top) or one part (border-color). border-style needs a value (solid, dashed, dotted) or no border shows even with a width and color.

Power-ups you unlock

border: width style color (shorthand)
Style is required — no style, no border
Per-side: border-top/right/bottom/left
Per-part: border-width/style/color

The Specificity Sphinx attacks — common mistakes

Setting width + color but omitting style (nothing renders)
Borders adding to box size without box-sizing
Per-side overrides clobbering the shorthand

Boss battleGive a box a solid border, then a dashed bottom border in a different color.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.b{border:2px solid #b388ff;border-bottom:2px dashed #8aff9d;padding:16px;color:#e6e0ff}</style></head><body style="background:#06040d"><div class="b">bordered box</div></body></html>

▶ Open the interactive comic issue

‹ Backgrounds · Attachment · Clip · Origin Borders · Radius · Individual Corners ›