Borders and Shadows

Style element edges with borders and rounded corners, use outline for accessible focus states, and add depth with box-shadow and text-shadow.

Borders define the visible edge of a box, but CSS gives you far more than a plain rectangular line — rounded corners, drop shadows, and glow effects are all achievable with a handful of properties and no images at all. This lesson also covers outline, a property frequently confused with border but which behaves very differently and plays a critical role in accessibility.

border shorthand and border-radius

The border property is shorthand for three sub-properties: border-width, border-style, and border-color, typically written in that order (e.g. border: 2px solid #333;). border-style is actually required for a border to render at all — without it (i.e. its default value of none), width and color are ignored and no border appears, a very common beginner mistake.

Each side can be controlled independently with border-top, border-right, border-bottom, and border-left (each of which is itself shorthand for that side's width/style/color). border-radius rounds the corners of the box — a single value rounds all four corners equally, while border-radius: 50% on a perfectly square element produces a circle.

• border: <width> <style> <color> — style is mandatory for anything to show • border-style values: solid, dashed, dotted, double, groove, none, and more • border-radius: 8px rounds all corners; border-radius: 50% on a square box makes a circle • Per-side control: border-top, border-right, border-bottom, border-left

outline vs border

outline looks superficially similar to border — it also takes width, style, and color — but behaves fundamentally differently. Outline is drawn OUTSIDE the border edge and does NOT take up any space in the box model: adding an outline never changes the element's layout size or pushes neighboring elements around, unlike border which does affect layout under content-box sizing.

The most important practical use of outline is the :focus state on interactive elements like links, buttons, and form inputs. Browsers apply a default outline automatically when an element receives keyboard focus, which is a critical accessibility signal for keyboard-only users to see where they are on the page. Developers should never remove this outline (outline: none) without replacing it with an equally visible custom focus style — doing so makes a site unusable for keyboard and screen-reader users.

box-shadow and text-shadow

box-shadow adds a drop shadow to an element's box, accepting horizontal offset, vertical offset, blur radius, (optionally) spread radius, and a color, in that order: box-shadow: 2px 4px 8px rgba(0,0,0,0.3);. Adding the keyword inset before these values flips the shadow to render inside the box instead of outside, producing a pressed-in or carved appearance. Multiple shadows can be comma-separated to layer several at once.

text-shadow works almost identically but shadows the glyphs of text rather than the box: text-shadow: 1px 1px 2px black;. It's commonly used to improve text legibility over busy background images, or for stylized, glowing, or embossed text effects.

Border and Shadow Properties

box-shadow order: offset-x offset-y blur-radius spread-radius color outline-offset pushes the outline further away from the border edge without affecting layout

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card:focus {
  outline: 3px solid #2575fc;
  outline-offset: 2px;
}

Code Examples

A subtle, softly blurred shadow (8px blur radius, low opacity) floating 2px below the card gives the impression the card is slightly raised off the page — one of the most common patterns in modern card-based UI design.

Rather than removing the default focus outline, this replaces it with a clearly visible custom one. Because outline doesn't participate in the box model, adding it never shifts surrounding layout — unlike adding a border would.

outline: 3px solid #ffbf47;

Stacking several shadows of increasing blur and decreasing opacity approximates the soft, realistic falloff of real-world light far better than a single flat shadow value could — a technique borrowed directly from Material Design's elevation system.

.card {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 20px;
  background: white;
}

button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

.raised {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 4px 8px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.08);
}

border vs outline

border is part of the box model and affects the element's footprint (under content-box); outline is painted on top, outside everything, and never changes layout.

content | padding | BORDER | (box edge — width/height stop here)
                              ^
                        OUTLINE drawn here,
                     outside the box, no layout impact

Important Rules

border-style must be set to something other than none for any border-width or border-color to have visible effect.

outline never affects element size or position of neighboring elements — border can, depending on box-sizing.

Never set outline: none on a focusable element without providing an equally visible custom focus style in its place.

box-shadow's color and blur come after the two required offset values; spread-radius is optional and comes before the color.

Why this matters on real projects

Card-based UIs (dashboards, product grids, social feeds) rely heavily on border-radius and layered box-shadow to create the soft, elevated look users expect from modern interfaces, entirely without image assets. Meanwhile, outline-based focus styles are frequently checked in accessibility audits (WCAG 2.4.7) — sites that strip outline: none without a replacement routinely fail these audits and are legally risky for organizations that must meet accessibility standards.

button:focus { outline: none; } button:focus-visible { outline: 3px solid #2575fc; }

Removing the focus outline with no replacement erases the only visual cue keyboard users have for where focus currently is on the page, which is a serious accessibility failure. Always swap in a custom, clearly visible style instead of deleting it outright.

[True / False] True or False: Adding outline: 4px solid red; to an element will increase that element's total width, the same way adding a border of the same size would under box-sizing: content-box. A. True B. False

B. False — False. outline is drawn outside the element's border and never participates in the box model — it never changes the element's width, height, or the position of surrounding elements, unlike border, which does add to the box's footprint under content-box.

Style a.btn with rounded corners, a subtle shadow at rest, and a distinct, clearly visible custom outline (not the browser default, and not removed) when focused via keyboard..btn { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }.btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

Use border-radius and box-shadow for the resting state; add an outline (not outline: none) inside a :focus-visible rule.