Backgrounds and borders

Backgrounds and borders help plain HTML elements feel visual and organized.

You can use them to create cards, alerts, buttons, profile boxes, and page sections. A simple background color or border can make content much easier to scan.

In this lesson, you will learn how to style backgrounds, background images, border lines, and rounded corners.

What backgrounds and borders do

A background sits behind an element's content.

By default, the background is visible behind the content, padding, and border areas. It does not fill the margin, because margin is transparent space outside the element.

A border is a line around the element.

By default, borders add to the element's final size. If you use box-sizing: border-box, the border is included inside the width you set.

<div class="box-demo">
  <div class="demo-box content-box">content-box</div>
  <div class="demo-box border-box">border-box</div>
</div>

<style>
  .box-demo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
  }

  .demo-box {
    width: 160px;
    padding: 20px;
    border: 6px solid royalblue;
    background-color: lightblue;
  }

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

  .border-box {
    box-sizing: border-box;
  }
</style>

Both boxes use width: 160px, but the content-box example becomes wider after padding and border are added. The border-box example keeps the final visible box at the width you wrote.

Background colors

The background-color property sets a solid color behind an element.

You can use any valid CSS color format, such as a color name, hex code, RGB value, or HSL value.

<div class="alert-box">Remember to save your work.</div>

<style>
  .alert-box {
    padding: 16px;
    background-color: lightyellow;
    font-family: Arial, sans-serif;
  }
</style>

Choose a background color that keeps the text easy to read. Light text on a light background, or dark text on a dark background, can be hard to see.

Background images

The background-image property places an image behind an element.

Use the url() function to tell the browser where the image file is.

<section class="hero-section">
  <h2>Weekend Hiking Club</h2>
</section>

<style>
  .hero-section {
    padding: 40px;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
  }
</style>

The image path can be a local file path or a full URL.

Remember: if you forget url(), the background image will not work.

Background repeat behavior

By default, a background image repeats.

This means the browser tiles the image again and again until the element is filled.

Use background-repeat to control that behavior:

• repeat: repeats the image horizontally and vertically
• no-repeat: shows the image once
• repeat-x: repeats the image only left to right
• repeat-y: repeats the image only top to bottom

<div class="repeat-demo">
  <div class="pattern-box repeat-pattern">repeat</div>
  <div class="pattern-box single-pattern">no-repeat</div>
</div>

<style>
  .repeat-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .pattern-box {
    width: 140px;
    height: 90px;
    padding: 12px;
    border: 1px solid #ccc;
    background-image: radial-gradient(circle, #2563eb 3px, transparent 4px);
    background-size: 24px 24px;
  }

  .repeat-pattern {
    background-repeat: repeat;
  }

  .single-pattern {
    background-repeat: no-repeat;
  }
</style>

Small patterns can look good with repeat. Photos and logos usually need no-repeat.

Background position and size

When a background image does not repeat, it starts in the top-left corner by default.

The background-position property moves the image inside the element.

<div class="logo-box">Image placed on the right.</div>

<style>
  .logo-box {
    width: 320px;
    padding: 32px 120px 32px 20px;
    border: 1px solid #ccc;
    background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=120&auto=format&fit=crop");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Arial, sans-serif;
  }
</style>

Useful position values include top, bottom, left, right, and center.

The background-size property controls how large the image appears.

• cover: fills the whole element, but may crop part of the image
• contain: shows the whole image, but may leave empty space

<div class="banner-demo">
  <div class="banner cover-banner">cover</div>
  <div class="banner contain-banner">contain</div>
</div>

<style>
  .banner-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .banner {
    width: 180px;
    height: 120px;
    display: grid;
    place-items: center;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .cover-banner {
    background-size: cover;
  }

  .contain-banner {
    background-size: contain;
    background-color: #1f2937;
  }
</style>

Use cover when the image should fill the box. Use contain when seeing the full image matters more than filling the box.

Border width, style, and color

A border has three main parts:

• width: how thick the line is
• style: what kind of line it is
• color: what color the line is

Most developers use the border shorthand:

<div class="card">This card has a border.</div>

<style>
  .card {
    padding: 20px;
    border: 2px solid black;
    font-family: Arial, sans-serif;
  }
</style>

This means:

• 2px: border width
• solid: border style
• black: border color

The border style is required. If you write border: 2px black;, the border will not appear because the style is missing.

Border styles

The most common border styles are:

• solid: one continuous line
• dashed: short line segments
• dotted: small dots
• none: no border

<div class="coupon">Save 20%</div>

<style>
  .coupon {
    display: inline-block;
    padding: 16px 24px;
    border: 2px dashed green;
    font-family: Arial, sans-serif;
  }
</style>

Use border styles carefully. A solid border is usually the easiest to read.

Border radius

The border-radius property rounds the corners of an element.

<button class="rounded-button">Save changes</button>

<style>
  .rounded-button {
    padding: 10px 16px;
    border: 2px solid blue;
    border-radius: 8px;
    background-color: white;
    font-family: Arial, sans-serif;
  }
</style>

A small value, such as 6px or 8px, creates slightly rounded corners.

A large value can create a pill shape, especially on buttons.

<button class="pill-button">Continue</button>

<style>
  .pill-button {
    padding: 10px 24px;
    border: 2px solid purple;
    border-radius: 999px;
    background-color: lavender;
    font-family: Arial, sans-serif;
  }
</style>

Very large border-radius values do not always make a perfect circle. The final shape depends on the element's width and height.

Use border-radius: 50% when you want a circle from a square element:

<div class="circle">CSS</div>

<style>
  .circle {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 3px solid #2563eb;
    border-radius: 50%;
    background-color: #dbeafe;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }
</style>

The width and height are equal, so 50% creates a circle. If the element were wider than it is tall, the same value would create an oval.

Runnable example: profile card

This example combines a background color, background image, border, and border radius.

Try changing background-size: cover; to background-size: contain; and run the example again.

<div class="profile-card">
  <h2>CSS Student</h2>
  <p>Learning how backgrounds and borders shape a design.</p>
</div>

<style>
  .profile-card {
    box-sizing: border-box;
    width: 320px;
    padding: 24px;
    border: 4px solid #facc15;
    border-radius: 16px;
    background-color: #1d4ed8;
    background-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-family: Arial, sans-serif;
  }

  .profile-card h2 {
    margin-top: 0;
  }
</style>

The background image fills the card, the border frames it, and the rounded corners soften the shape.

The background-color is still useful. It acts as a fallback color while the image loads or if the image cannot load.

Common beginner mistakes

• Forgetting url(): write background-image: url("photo.jpg");, not background-image: "photo.jpg";.
• Using huge images: very large images can make pages load slowly.
• Expecting no repeat by default: background images repeat unless you set background-repeat: no-repeat;.
• Forgetting the border style: border: 2px black; will not show because it is missing solid, dashed, or another style.
• Using too much border radius: very large values can create unexpected oval or pill shapes.
• Using low contrast: a busy background image can make text hard to read.

Mini task

Run this button example:

<button>Check answer</button>

<style>
  button {
    border: 4px dotted green;
  }
</style>

What is the border width, style, and color?

Check the quiz answers below when you are ready.

Short quiz with answers

1. Which background-size value fills the whole element, even if part of the image is cropped?
2. Does a background color fill the margin area?
3. What happens if you forget the border style in the border shorthand?

Answers:

1. cover.
2. No. The margin is transparent.
3. The border will not appear.

Mini task answer: the width is 4px, the style is dotted, and the color is green.

Small challenge

Style the alert box below.

Your goals:

• Add a light red background color.
• Add a 3px solid dark red border.
• Round the corners by 6px.

<div class="alert-box">
  <h3>Warning</h3>
  <p>Please check your password and try again.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
  }
</style>

One possible solution:

<div class="alert-box">
  <h3>Warning</h3>
  <p>Please check your password and try again.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
    background-color: lightpink;
    border: 3px solid darkred;
    border-radius: 6px;
  }
</style>

Summary

• background-color sets a solid color behind an element.
• background-image adds an image with url().
• background-repeat controls whether a background image tiles.
• background-position moves a background image inside the element.
• background-size controls how large the background image appears.
• cover fills the whole box, but may crop the image.
• contain shows the whole image, but may leave empty space.
• border can set width, style, and color in one line.
• border-radius rounds the corners of an element.