FSM Full Stack Masterclass
Platform under construction
CSS course badge

Box Model

Intermediate

Border

Border draws the edge of a box. It can create separation, focus, depth and structure, but it also participates in sizing.

.input {
  border: 1px solid #344156;
  outline-offset: 3px;
}

Box Model

Borders give boxes an edge, literally and visually.

A border sits between padding and margin. It can be visible, subtle or transparent, and it can affect the final size of an element.

Borders are useful for cards, inputs, dividers and component states. They can signal hierarchy without relying on heavy backgrounds.

Do not confuse borders with outlines. Outlines are often better for focus states because they do not take up layout space.

Width

Controls thickness. Even a 1px border affects size unless border-box is used.

Style

solid, dashed and dotted are common. none means no visible border.

Color

Use currentColor, tokens or subtle contrast for consistent edges.

Outline difference

Outline draws outside the border and does not affect layout size.

Visual model

See the box before you change the CSS.

Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.

Margin

Outside space remains outside the border.

Border

The visible line that frames the component.

Padding

Keeps content away from the border.

Content

Should remain readable even when border changes.

Examples

Professional spacing is deliberate, not decorative guesswork.

Subtle, useful border

.input {
  border: 1px solid #344156;
  border-radius: .75rem;
  padding: .875rem 1rem;
}

.input:focus-visible {
  outline: 3px solid #8cffc1;
}

Focus hidden in border changes

.input:focus {
  border: 1px solid transparent;
  outline: none;
}

Rules that matter

Make every spacing and sizing decision explainable.

Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.

Use border for edges

Borders are great for separating surfaces without heavy fills.

Use outline for focus

Focus outlines should remain visible and should not shift layout.

Watch sizing

Border width can change final size unless border-box is active.

Keep color consistent

Use tokens or currentColor to avoid random edge colors.

Avoid noisy borders

Too many strong borders make interfaces feel boxed-in.

Pair with padding

A border without enough padding often makes content feel cramped.

Production thinking

The box model is where visual polish becomes maintainable CSS.

Why does this matter?

Borders help users read component boundaries. They are quiet structure when used well and visual noise when overused.

Accessibility

Never remove focus outlines without replacing them with a visible accessible focus indicator.

Production note

Use border tokens for forms, cards and dividers so the system feels consistent across pages.

SEO note

Clear form and content boundaries help users complete actions and understand page structure.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Change border width to 6px and notice the sizing effect.
  • Remove outline and explain why that is a problem.
  • Use currentColor for the border and change text color.

Practice assignment

Do this before moving to the next lesson.

  1. Create an input with border, padding and border-radius.
  2. Add a visible focus-visible outline.
  3. Check that the focus state does not shift surrounding layout.

Try it yourself

Style an input without losing focus

Live preview

Self-check

Before you continue, prove that you understand Border.

Intermediate

Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.

  1. Can you place border between padding and margin in the box model?
  2. Can you explain why outline is often better for focus?
  3. Can you predict how border width affects element size?
  4. Can you style form borders without hiding focus?
  5. Can you use subtle borders instead of heavy boxes everywhere?

Senior audit upgrade

Borders and outlines solve different problems.

Borders participate in layout. Outlines do not take space and are often better for focus visibility.

currentColor

border-color: currentColor keeps borders aligned with text color.

Transparent borders

A transparent border can reserve space before hover to avoid layout jump.

Outline

Use outline for focus rings so the component does not shift when focused.