Border, outline and box shadow

[[box-model]]

[[Which units to use#Border/margin/padding]]¶

Setting border¶

only border-style is required
- without it, border won't render
- border: solid => 3px black
- there's a bunch of other styles

Color of the border¶

uses currentColor by default
the font color

Border vs outline vs box-shadow¶

Example: for a focus indicator

border

takes up space in flow
box-sizing: border-box?
- it will shrink the content slightly

outline

takes up no space
- not a part of the box model
outline-offset: can be negative -> inside the content
respects border-radius
Accessibility

box-shadow

can have multiple box shadows
doesn't appear in Windows high contrast themes

workaround: a transparent outline fallback for box-shadow

a:focus {
    /* Visible in the full-colour space */
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 255, 1);

    /* Visible in Windows high-contrast themes */
    outline-color: transparent;
    outline-width: 2px;
    outline-style: dotted;
}

Have a border only on one side¶

box-shadow!

Border radius¶

should've been called corner radius - you don't need a border

Nested Rounded Corners ¶

--outer-radius: 1em;
--padding: 0.5em;
--inner-radius: calc(var(--outer-radius) - var(--padding));

Page dog ear¶

Cut out a corner

Lea Verou book

??????

background: linear-gradient(-45deg, transparent 15px, blue 0);

Box shadow¶

How box shadow works¶

box-shadow: 1px 2px 3px 4px grey;

a grey background is drawn with the same size and position as our element
moved 1px to the right and 2 px down
blurred by 3px
spread by 4px (makes your blur start further out)
Clip the shadow where the shadows and the element intersect

Last update: 2023-04-24