Skip to content

Border

[[box-model]] - only border-style is required - without it, border won't render - border: solid: will be 3px black - there's a bunch of other styles - border-styles.png

Color of the border

  • uses currentColor by default
  • the font color

Border vs outline vs box-shadow

Example: for a focus indicator

button-with-border.png

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
  • outline is still a rectangle in Safari
    • respects border-radius in other browsers
  • 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

image-20221115121033740.png

--outer-radius: 1em;
--padding: 0.5em;
--inner-radius: calc(var(--outer-radius) - var(--padding));
Last update: 2023-02-03