Lesson 7: Borders & Outlines

Overview

Borders and outlines are used to define the edges of elements and improve visual structure. They help highlight content, separate sections, and enhance design.

What is a Border?

A border wraps around the padding and content of an element.

div {
  border: 2px solid black;
}

Border Properties

1. Border Width

div {
  border-width: 3px;
}

2. Border Style

div {
  border-style: solid;
}

Common styles:

• solid
• dashed
• dotted
• double
• none

3. Border Color

div {
  border-color: red;
}

Border Shorthand

Combine all border properties:

div {
  border: 3px solid blue;
}

Individual Border Sides

div {
  border-top: 2px solid red;
  border-right: 2px solid green;
  border-bottom: 2px solid blue;
  border-left: 2px solid black;
}

Border Radius (Rounded Corners)

div {
  border-radius: 10px;
}

➡️ Makes corners rounded

Circle example:

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

What is an Outline?

An outline is similar to a border but:

• It is drawn outside the border
• It does not affect layout or size

div {
  outline: 2px solid red;
}

Difference: Border vs Outline

FeatureBorderOutlinePositionAround paddingOutside borderAffects layoutYesNoCan be roundedYesNo

Outline Offset

Controls space between border and outline.

div {
  outline: 2px solid red;
  outline-offset: 5px;
}

Example: Full Styling

HTML

<div class="box">Hello</div>

CSS

.box {
  border: 3px solid blue;
  border-radius: 8px;
  outline: 2px dashed red;
  outline-offset: 4px;
  padding: 20px;
}

Common Mistakes to Avoid

• Forgetting to set border-style (border won’t show)
• Using too many border styles
• Confusing border with outline
• Overusing outlines in design

Best Practices

• Use borders for layout and design
• Use outlines for focus (e.g., accessibility)
• Keep styles simple and consistent
• Use border-radius for modern UI

Key Takeaways

• Borders define element edges
• Outlines sit outside borders and don’t affect layout
• Shorthand properties simplify code
• Rounded corners improve design

What’s Next

In the next lesson — Display & Visibility — you’ll learn how elements appear and behave in layout (block, inline, none, etc.)