CSS - Borders & Outline

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 8–12 minutes

Use borders for element boundaries and outlines for accessible focus without shifting layout.

Learning Objectives

• Apply border shorthands and rounded corners.
• Use outline and outline-offset for focus styles.

Details & Examples

• border shorthand: width style color
• border-radius: rounded corners
• outline and outline-offset: focus rings that don’t affect layout

Checks for Understanding

1. Why might you prefer outline over border for focus?

Exercises

1. Create an accessible focus outline using outline and outline-offset.
2. Build a pill button with rounded corners and a subtle border.