PHASE 5Beginner ~21 min· topic 7 of 8

Topic 5.7

Borders, Radius, Outlines and Shadows

In one line

Borders are part of the box and take up space; border-radius rounds the corners; outlines and box shadows are painted outside the layout and never move anything, which makes them ideal for focus rings and depth.

Think of it like this

Decorating a photo. A border is a real frame: it makes the picture bigger and takes wall space. Rounded corners are like cutting the corners of the photo with scissors. An outline is a ring of chalk drawn on the wall around the frame: it takes no space and nothing has to move. A shadow is the darker patch the frame casts on the wall behind it.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Border style: How the border line is drawn: solid, dashed, dotted, double and so on. Without it there is no border.
currentColor: A keyword meaning "this element's text colour". Borders use it when no colour is given.
border-radius: The property that rounds the corners of a box.
Outline: A line drawn around a box that takes no space and never moves anything.
Focus ring: The visible outline that shows which element the keyboard is on.
:focus-visible: A selector that matches a focused element when a visible focus ring is helpful, like during keyboard use.
box-shadow: A shadow painted around (or inside) a box. It takes no space.
Spread: The fourth length in a box-shadow. It makes the shadow bigger (or smaller, if negative) than the box.

Step by step

01Draw a border

Start with the full shorthand. The order of the three values doesn't matter, but width, style, colour is the convention.

style.csswhole filecss

.card {
  border: 1px solid #e2e8f0;
}
.card-header {
  border-bottom: 3px solid #6366f1; /* one side only */
}

02Round the corners

Add a radius. Values go clockwise from the top-left corner; 50% on a square makes a circle.

style.csswhole filecss

.card   { border-radius: 12px; }
.avatar { border-radius: 50%; }          /* circle */
.pill   { border-radius: 9999px; }        /* fully rounded ends */
.tab    { border-radius: 8px 8px 0 0; }   /* only the top corners */

03Add depth with layered shadows

Two shadows: a small tight one for the edge, a large soft one for the lift. Neither moves any other element.

style.csswhole filecss

.card {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.08),
    0 8px 24px rgb(0 0 0 / 0.12);
}

04Style focus without breaking it

Replace the default ring with your own, shown only for keyboard focus. Keep it thick and high-contrast.

style.csswhole filecss

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

Style focus without breaking itdiagram

Rendering diagram…

Try it yourself

1
Predict the bordered width
In the first example, change .bordered to border: 4px solid. Predict its offsetWidth (84 + 2 × 8 padding + 2 × 4 border = 108) before running.
2
Make an egg
In the second example, give .leaf the radius 50% 50% 50% 50% / 60% 60% 40% 40%. The slash separates horizontal and vertical radii for each corner.
3
Remove the focus ring, then fix it
Replace the button:focus-visible rule with button:focus { outline: none; } and tab to the button: you can't see where you are. Put the :focus-visible rule back.

Code & diagrams

Borders take space; outlines and shadows don't New tab

All four look like they have a 10px ring, but only the border changed the box's size.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

plain offsetWidth: 100
bordered offsetWidth: 120
outlined offsetWidth: 100
shadowed offsetWidth: 100
border colour: rgb(190, 24, 93)

Radius shapes, styles and layered shadows New tab

Click in the preview, then press Tab: the blue focus ring appears on the button (and follows its rounded corners). Clicking it with a mouse doesn't show the ring.

Preview

Press Run to see the page.

Console

Nothing logged yet.

A focus style that survives forced-colours modecss

button:focus-visible {
  /* the visible ring in normal mode */
  box-shadow: 0 0 0 3px white, 0 0 0 6px #2563eb;
  /* invisible normally; in Windows High Contrast mode shadows are removed
     and this transparent outline is drawn in a system colour instead */
  outline: 2px solid transparent;
}

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

outline: none with nothing instead

Add *:focus { outline: none; } to remove "ugly" focus rings.

terminal

$ keyboard user presses Tab

── what you'll see ──

Focus moves, but nothing on the page shows where it is

Break #2

Hover border that makes the layout jump

Give cards border: 0 and border: 2px solid blue on :hover.

terminal

$ the page shows

── what you'll see ──

Hovering a card makes it 4px bigger and pushes the cards around it, so the page jitters

Myth vs fact

Myth

border: 5px is enough to show a border.

Fact

With no style, border-style stays none and the width computes to 0. The style is the one part you can't leave out.

Myth

Outlines are always rectangles.

Fact

In current Chrome, Edge, Firefox and Safari, outlines follow border-radius. Older browsers drew square outlines around rounded boxes, which is why people used box-shadow rings instead.

Myth

A box-shadow makes the element bigger.

Fact

Shadows are painted only. They don't change the box size or move anything, and they don't count for scrolling or clicks. (They are clipped by an overflow: hidden ancestor.)

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Large blurred box-shadows are expensive to paint, especially when animated. For hover lift effects, put the big shadow on a ::after pseudo-element and animate its opacity, which the compositor handles cheaply.
▸
border-image lets an image or gradient draw the border (it ignores border-radius). For gradient borders with rounded corners, use two backgrounds with background-clip: padding-box, border-box and a transparent border (Topic 5.8).
▸
corner-shape (squircle and notched corners) is new in Chrome as of 2025; treat it as progressive enhancement and keep border-radius as the fallback.
▸
Box shadows don't affect hit testing or scroll overflow, and they're not shown in forced-colours mode. filter: drop-shadow() is the alternative that follows the shape of transparent images and clipped shapes.

Remember this

1
A border has three parts: width, style and colour. The shorthand border: 2px solid #334155 sets all three on every side; border-top, border-right and so on set one side; and border-width, border-style, border-color take one to four values clockwise like padding. The style is the one that matters most: the default is none, which makes the computed width 0. If you leave out the colour, the border uses currentColor, the element's text colour.
2
Border styles include solid, dashed, dotted, double, and the 3D-looking groove, ridge, inset and outset. Different colours on adjacent sides meet at a diagonal; that's how the old "CSS triangle" trick works (a zero-size box with one coloured border and transparent neighbours).
3
border-radius rounds the corners of the border box, and the background, border and shadow follow the curve. border-radius: 8px rounds all four; four values go clockwise from the top-left. 50% on a square makes a circle, and on a rectangle an ellipse. A slash gives elliptical corners: border-radius: 40px / 20px is 40px horizontally and 20px vertically. If two radii on one side add up to more than that side, the browser scales them all down proportionally, so border-radius: 9999px makes a perfect "pill".
4
outline looks like a border but is not part of the box model: it takes no space, never changes layout, and is drawn outside the border edge (move it with outline-offset). Modern browsers make the outline follow border-radius. Browsers draw an outline as the focus ring when you tab to a link or button, which keyboard users depend on. Never remove it without a replacement; style it with :focus-visible, which matches only when the browser decides a visible focus indicator is helpful (keyboard use, not mouse clicks).
5
box-shadow: x y blur spread color paints a shadow of the border box: x and y move it, blur softens it, spread grows or shrinks it, and inset draws it inside the box instead. Like outlines, shadows take no space in the layout. You can stack several shadows separated by commas; the first is drawn on top. Layering a small sharp shadow with a large soft one looks much more natural than one big shadow, and 0 0 0 3px (no blur, only spread) makes a solid ring that follows the corners, a common custom focus style.
6
Accessibility: interactive borders and focus rings must have enough contrast. WCAG 2.2 asks for a contrast of at least 3:1 for parts of controls you need to see (like an input's border) and for focus indicators against their neighbours. In Windows High Contrast (forced colours) mode, box shadows are removed, so a focus style made only of box-shadow disappears; add outline: 2px solid transparent as well, which turns visible in that mode.

Explain it without notes

What's the difference between border, outline and box-shadow?

Why does border: 3px blue show no border?

Explain box-shadow: inset 0 2px 4px 1px rgb(0 0 0 / 0.2) value by value.

How should you style focus indicators, and why not remove them?

Practice

Make a 100×100 .dot that is a perfect circle with a 4px solid border in the element's text colour (teal). Log its computed border-top-left-radius and border-top-color.

Give a button a custom focus ring that shows only for keyboard focus and doesn't shift the layout. Log its offsetWidth before and after calling focus().

Trade-offs

↔
Borders are part of the layout (predictable, can be used as real dividers); outlines and shadows are decoration with no layout cost but can be clipped by overflow and vanish in forced-colours mode.
↔
Layered shadows look realistic but cost paint time; keep them static or animate opacity rather than the shadow itself.

Done when you can

I can write border shorthands and know the style is required.
I can make circles, pills and single rounded corners with border-radius.
I can explain why outlines and shadows don't change layout.
I can build a layered box-shadow and an inset shadow.
I can style focus with :focus-visible without hurting accessibility.

Command Palette

Words you'll meet

Step by step

01Draw a border

02Round the corners

03Add depth with layered shadows

04Style focus without breaking it

Try it yourself

Predict the bordered width

Make an egg

Remove the focus ring, then fix it

Code & diagrams

Break it on purpose

outline: none with nothing instead

Hover border that makes the layout jump

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can