Border & CSS Box Model — Web Development Class 27

Class 027 — Border & CSS Box Model

The CSS Box Model is one of the most important concepts in web development. Every HTML element displayed by a browser can be understood as a rectangular box.

This box consists of four main areas:

• Content
• Padding
• Border
• Margin

Understanding the Box Model helps you control element size, spacing, borders and layouts correctly.

In this class, you will learn:

• CSS Border
• border-width
• border-style
• border-color
• Border shorthand
• Individual side borders
• border-radius
• CSS Box Model
• Content area
• Padding area
• Border area
• Margin area
• content-box
• border-box
• box-sizing
• Calculating element dimensions
• Practical card design

LEARNING OBJECTIVES

After completing this class, you will be able to:

• Understand CSS borders.
• Add borders to HTML elements.
• Control border width.
• Control border style.
• Control border color.
• Use border shorthand.
• Style individual border sides.
• Create rounded corners.
• Understand the CSS Box Model.
• Identify content, padding, border and margin.
• Understand how padding and borders affect dimensions.
• Understand content-box and border-box.
• Use box-sizing: border-box.
• Calculate basic element dimensions.
• Build practical cards using the Box Model.

WHAT IS A CSS BORDER?

A border is a line drawn around an element’s padding and content.

Basic example:

.box {
border: 2px solid black;
}

This creates:

2px = Border width
solid = Border style
black = Border color

BORDER SYNTAX

A common border shorthand syntax is:

border: width style color;

Example:

.card {
border: 1px solid #cccccc;
}

BORDER-WIDTH

The border-width property controls the thickness of a border.

Example:

.box {
border-width: 5px;
border-style: solid;
border-color: blue;
}

Common values can include:

thin
medium
thick

or length values such as:

1px
2px
5px

BORDER-STYLE

The border-style property defines how a border is drawn.

Example:

.box {
border-style: solid;
}

Common border styles include:

solid
dashed
dotted
double
groove
ridge
inset
outset
none
hidden

SOLID BORDER

.box {
border: 2px solid black;
}

DASHED BORDER

.box {
border: 2px dashed blue;
}

DOTTED BORDER

.box {
border: 3px dotted red;
}

DOUBLE BORDER

.box {
border: 5px double green;
}

NO BORDER

.box {
border: none;
}

BORDER-COLOR

The border-color property controls the border color.

Example:

.box {
border-style: solid;
border-width: 2px;
border-color: red;
}

You can use different CSS color formats.

Example:

border-color: blue;

border-color: #2563eb;

border-color: rgb(37, 99, 235);

border-color: hsl(217, 91%, 60%);

BORDER SHORTHAND

Instead of writing:

.card {
border-width: 2px;
border-style: solid;
border-color: blue;
}

you can write:

.card {
border: 2px solid blue;
}

This is called border shorthand.

INDIVIDUAL BORDER SIDES

CSS allows you to control each side separately.

The four sides are:

border-top
border-right
border-bottom
border-left

Example:

.box {
border-top: 3px solid red;
border-right: 3px solid green;
border-bottom: 3px solid blue;
border-left: 3px solid orange;
}

BORDER-BOTTOM EXAMPLE

Borders are often used under headings.

Example:

.section-title {
border-bottom: 2px solid #2563eb;
}

BORDER-LEFT EXAMPLE

A left border can be useful for quotes or alerts.

Example:

.quote {
border-left: 4px solid #2563eb;
padding-left: 20px;
}

INDIVIDUAL BORDER PROPERTIES

You can also control individual characteristics.

Example:

.box {
border-top-width: 5px;
border-top-style: solid;
border-top-color: red;
}

BORDER-RADIUS

The border-radius property creates rounded corners.

Example:

.card {
border-radius: 10px;
}

Another example:

.button {
border-radius: 8px;
}

MORE ROUNDED CORNERS

.card {
border-radius: 20px;
}

CIRCULAR ELEMENT

If an element has equal width and height, you can use:

.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
}

This can create a circular shape.

INDIVIDUAL CORNER RADIUS

CSS also provides:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Example:

.box {
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}

WHAT IS THE CSS BOX MODEL?

Every HTML element can be represented as a box.

The Box Model contains four main layers:

1. Content
2. Padding
3. Border
4. Margin

Visual concept:

+—————————————+
| MARGIN |
| +——————————-+ |
| | BORDER | |
| | +———————–+ | |
| | | PADDING | | |
| | | +—————+ | | |
| | | | CONTENT | | | |
| | | +—————+ | | |
| | +———————–+ | |
| +——————————-+ |
+—————————————+

CONTENT AREA

The content area contains the actual content of an element.

Examples:

• Text
• Images
• Videos
• Child elements

Example:

Hello World

“Hello World” is the content.

PADDING AREA

Padding is the space between content and border.

Example:

.box {
padding: 20px;
}

BORDER AREA

The border surrounds the padding and content.

Example:

.box {
border: 5px solid blue;
}

MARGIN AREA

Margin creates space outside the border.

Example:

.box {
margin: 30px;
}

COMPLETE BOX MODEL EXAMPLE

HTML:

CSS Box Model

CSS:

.box {
width: 300px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
}

The element contains:

Content width = 300px

Left padding = 20px
Right padding = 20px

Left border = 5px
Right border = 5px

Margin exists outside the border.

DEFAULT BOX-SIZING

The default box-sizing value for most elements is:

content-box

Example:

.box {
box-sizing: content-box;
}

WHAT IS CONTENT-BOX?

With:

box-sizing: content-box;

the declared width and height apply to the content box.

Padding and border are then added outside the declared content dimensions.

CONTENT-BOX CALCULATION

Example:

.box {
width: 300px;
padding: 20px;
border: 5px solid black;
}

Horizontal calculation:

Content width:

300px

Left + Right Padding:

20px + 20px = 40px

Left + Right Border:

5px + 5px = 10px

Total outer width excluding margin:

300px + 40px + 10px

= 350px

WHAT ABOUT MARGIN?

Suppose:

.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}

The border-box width is:

350px

If you also count left and right margins for the total horizontal space occupied in this simplified example:

350px + 30px + 30px

= 410px

BOX-SIZING: BORDER-BOX

A very useful CSS rule is:

box-sizing: border-box;

Example:

.box {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}

Now the declared 300px width includes:

• Content
• Padding
• Border

The element’s border box remains 300px wide.

CONTENT-BOX VS BORDER-BOX

content-box:

width applies to the content area.

Padding and border are added outside that width.

border-box:

width includes the content area, padding and border.

Example:

.box-one {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}

Outer border-box width:

350px

Example:

.box-two {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}

Outer border-box width:

300px

WHY BORDER-BOX IS POPULAR

border-box makes element sizing easier to reason about.

For example:

.card {
width: 100%;
padding: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
}

The padding and border remain included within the specified width.

COMMON GLOBAL BOX-SIZING RULE

A common CSS setup is:

• {
  box-sizing: border-box;
  }

A more complete pattern used in many projects is:

*,
*::before,
*::after {
box-sizing: border-box;
}

This applies border-box sizing to elements and their generated pseudo-elements.

BOX MODEL WITH HEIGHT

The same concept also applies vertically.

Example:

.box {
height: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}

Content height:

200px

Top + Bottom Padding:

40px

Top + Bottom Border:

10px

Total border-box height:

250px

With:

box-sizing: border-box;

and:

height: 200px;

the specified height includes content, padding and border within the border box.

PRACTICAL CARD EXAMPLE

HTML:

<h2>
    Web Development
</h2>

<p>
    Learn HTML, CSS and JavaScript from beginner to advanced.
</p>

<a href="#" class="button">
    Learn More
</a>

CSS:

• {
  box-sizing: border-box;
  }

.card {
width: 100%;
max-width: 400px;

padding: 24px;

border: 1px solid #d1d5db;

border-radius: 12px;

background-color: #ffffff;

}

.card h2 {
margin-top: 0;
margin-bottom: 12px;
}

.card p {
margin-bottom: 20px;
}

.button {
display: inline-block;

padding: 10px 20px;

border: 2px solid #2563eb;

border-radius: 8px;

text-decoration: none;

}

CODE EXPLANATION

• {
  box-sizing: border-box;
  }

Makes sizing easier to manage.

.card {
max-width: 400px;
}

Limits the card’s maximum width.

padding: 24px;

Creates internal space.

border: 1px solid #d1d5db;

Creates the card border.

border-radius: 12px;

Rounds the corners.

BOX MODEL AND BACKGROUND

An element’s background is painted through the content and padding areas and, by default, extends underneath the border.

Margin is outside the element’s background painting area.

Example:

.card {
background-color: blue;
padding: 20px;
border: 5px solid black;
margin: 30px;
}

The blue background covers the content and padding and is painted beneath the border, but it does not paint the margin area.

OUTLINE VS BORDER

CSS also provides:

outline

Example:

button {
outline: 2px solid blue;
}

An outline is different from a border.

A border participates in the box model.

An outline is drawn around an element without taking up layout space in the same way.

Important:

Do not remove focus outlines without providing an accessible alternative focus indicator.

PRACTICAL FORM EXAMPLE

HTML:

<input
type=”text”
class=”input”
placeholder=”Enter your name”

CSS:

.input {
width: 100%;
padding: 12px 16px;

border: 1px solid #cccccc;

border-radius: 6px;

box-sizing: border-box;

}

Without border-box, width plus padding and border can make sizing less intuitive.

With border-box, the input’s specified width includes its padding and border.

BOX MODEL IN BROWSER DEVTOOLS

Modern browsers provide developer tools that can show the Box Model visually.

You can inspect an element and view:

• Content dimensions
• Padding
• Border
• Margin

This is extremely useful when debugging spacing and sizing problems.

COMMON MISTAKES

1. FORGETTING BORDER STYLE

This may not produce a visible border as expected:

.box {
border-width: 2px;
border-color: red;
}

Add a style:

.box {
border-width: 2px;
border-style: solid;
border-color: red;
}

Or use shorthand:

.box {
border: 2px solid red;
}

2. CONFUSING BORDER AND OUTLINE

Border affects the element’s box model.

Outline behaves differently and does not take up layout space in the same way.

3. FORGETTING BOX-SIZING

Example:

.box {
width: 100%;
padding: 30px;
}

With content-box sizing, padding can increase the element’s border-box width beyond the specified width.

Using:

box-sizing: border-box;

often makes this easier to manage.

4. CALCULATING WIDTH INCORRECTLY

For content-box:

Total border-box width =

Content width

• Left padding
• Right padding
• Left border
• Right border

5. ADDING MARGIN TO THE ELEMENT WIDTH INCORRECTLY

Margin is outside the border box.

Do not confuse border-box dimensions with the additional external margin space.

6. USING TOO MUCH BORDER

Heavy borders around every element can make a website look cluttered.

Use borders intentionally.

7. EXCESSIVE BORDER-RADIUS

Large radius values on every component may create an inconsistent design.

Use a consistent design system.

8. DISTORTING CIRCLES

For:

border-radius: 50%;

a perfect circle generally requires equal width and height.

9. REMOVING FOCUS OUTLINES

Avoid:

button:focus {
outline: none;
}

unless you provide another clearly visible accessible focus style.

10. FORGETTING PADDING IN BOX MODEL CALCULATIONS

Padding contributes to the element’s border-box dimensions when using content-box sizing.

NEW & DIFFICULT WORDS

Border = A line surrounding an element’s padding and content.

Border Width = Thickness of a border.

Border Style = The visual style used to draw a border.

Border Color = The color of a border.

Border Radius = A CSS property used to round corners.

Box Model = The CSS model describing an element as content, padding, border and margin.

Content = The actual material inside an element.

Padding = Space between content and border.

Margin = Space outside the border.

content-box = A box-sizing mode where declared width and height apply to the content box.

border-box = A box-sizing mode where declared width and height include padding and border.

box-sizing = The property that determines how width and height calculations are performed.

Outer Size = The physical dimensions of a box including relevant box-model areas.

Outline = A line drawn around an element that does not participate in layout like a border.

DevTools = Browser Developer Tools used to inspect and debug webpages.

Dimension = A measurable width or height.

Pseudo-element = A CSS-generated element-like box such as ::before or ::after.

IMPORTANT NOTES

Basic border:

border: 2px solid black;

Dashed border:

border: 2px dashed blue;

Rounded corners:

border-radius: 10px;

Bottom border:

border-bottom: 2px solid blue;

Default sizing:

box-sizing: content-box;

Recommended common sizing pattern:

*,
*::before,
*::after {
box-sizing: border-box;
}

Box Model order:

Content
→ Padding
→ Border
→ Margin

Content-box width calculation:

Border-box width =
Content width

• Horizontal padding
• Horizontal border

PRACTICE

1. Create a div with a solid border.
2. Create dashed and dotted borders.
3. Change border width.
4. Change border color.
5. Add different borders to all four sides.
6. Create rounded corners.
7. Create a circular element using border-radius: 50%.
8. Create a box with:

width: 300px;
padding: 20px;
border: 5px solid black;

9. Calculate its border-box width using content-box.
10. Change it to:

box-sizing: border-box;

11. Compare the result.
12. Add margin and observe the external spacing.
13. Inspect the element using browser DevTools.
14. Create a card using border and padding.
15. Create a form input using border-box.

ASSIGNMENT

Create a webpage called:

CSS Border & Box Model Practice

The page should contain:

• Header
• Main container
• Three cards
• Profile image
• Form
• Buttons
• Footer

Requirements:

• Use border.
• Use border-width.
• Use border-style.
• Use border-color.
• Use border shorthand.
• Use individual side borders.
• Use border-radius.
• Create one circular element.
• Use padding.
• Use margin.
• Use content-box once.
• Use border-box.
• Calculate the dimensions of at least one element.
• Inspect the Box Model using browser DevTools.

MINI PROJECT

Create a professional pricing card.

HTML:

<h2>
    Professional Plan
</h2>

<p class="price">
    $49
</p>

<p>
    Perfect for professional websites and small businesses.
</p>

<a href="#" class="button">
    Get Started
</a>

CSS:

*,
*::before,
*::after {
box-sizing: border-box;
}

.pricing-card {
width: 90%;
max-width: 400px;

padding: 32px;

border: 1px solid #d1d5db;

border-top: 5px solid #2563eb;

border-radius: 16px;

margin: 40px auto;

background-color: white;

}

.pricing-card h2 {
margin-top: 0;
}

.price {
font-size: 40px;
font-weight: 700;
}

.button {
display: inline-block;

padding: 12px 24px;

border: 2px solid #2563eb;

border-radius: 8px;

text-decoration: none;

}

QUIZ

1. What is a CSS border?

Answer:

A border is a line drawn around an element’s padding and content.

2. What are the three common parts of border shorthand?

Answer:

Border width, border style and border color.

3. Write a 2px solid blue border.

Answer:

border: 2px solid blue;

4. Which property creates rounded corners?

Answer:

border-radius

5. What are the four parts of the CSS Box Model?

Answer:

Content, Padding, Border and Margin.

6. What is the default box-sizing value for most elements?

Answer:

content-box

7. What does content-box mean?

Answer:

The specified width and height apply to the content box, while padding and border are added outside those dimensions.

8. What does border-box mean?

Answer:

The specified width and height include the content, padding and border.

9. Calculate the border-box width:

width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;

Answer:

300 + 40 + 10 = 350px

10. What happens with the same values using border-box and width: 300px?

Answer:

The border-box width remains 300px.

11. Is margin included inside the border box?

Answer:

No. Margin is outside the border box.

12. What is the difference between border and outline?

Answer:

A border participates in the box model, while an outline is drawn around the element without taking up layout space in the same way.

INTERVIEW QUESTIONS

Q: What is the CSS Box Model?

Answer:

The CSS Box Model describes how an element is represented as a box consisting of content, padding, border and margin.

Q: What is the difference between padding and margin?

Answer:

Padding creates space between content and border, while margin creates space outside the border.

Q: What is box-sizing?

Answer:

box-sizing determines how the browser calculates an element’s specified width and height.

Q: What is the difference between content-box and border-box?

Answer:

With content-box, specified width and height apply to the content area and padding and borders are added outside them.

With border-box, specified width and height include the content, padding and border.

Q: Why is box-sizing: border-box commonly used?

Answer:

It makes element dimensions easier to manage because padding and borders are included within the specified width and height.

Q: How do you calculate the border-box width with content-box?

Answer:

Add:

Content width

• Left and right padding
• Left and right border

Q: Is margin included in an element’s specified width?

Answer:

No. Margin exists outside the border box.

Q: What does border-radius do?

Answer:

It rounds the corners of an element’s border box.

Q: How can you create a circle with CSS?

Answer:

Use equal width and height and apply:

border-radius: 50%;

CLASS SUMMARY

In Class 27, you learned CSS Border & Box Model.

You learned:

• border
• border-width
• border-style
• border-color
• Border shorthand
• Individual borders
• border-radius
• Content
• Padding
• Border
• Margin
• CSS Box Model
• content-box
• border-box
• box-sizing
• Element dimension calculations
• Outline vs border
• Browser DevTools Box Model

Remember the Box Model:

Content
→ Padding
→ Border
→ Margin

A common global rule is:

*,
*::before,
*::after {
box-sizing: border-box;
}

Understanding the CSS Box Model is essential for building accurate and predictable website layouts.

NEXT CLASS:

Class 028 — Display Property