CSS Backgrounds & Borders

background-color

background-color sets the background color behind an element's content and padding area.

.card {
  background-color: #f8fafc;
  color: #0f172a;
}

background-image

A background image is decorative CSS content painted behind the element. It does not replace meaningful HTML images.

.hero {
  background-image: url("hero.jpg");
}

background-repeat

Small background images repeat by default. Use background-repeat when you want to control tiling.

.hero {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
}

.pattern {
  background-repeat: repeat;
}

• repeat — repeat horizontally and vertically.
• no-repeat — show one copy only.
• repeat-x — repeat horizontally.
• repeat-y — repeat vertically.

background-position

background-position decides where the background image is placed inside the element.

.hero {
  background-position: center center;
}

.avatar-bg {
  background-position: top right;
}

background-size

background-size controls how large a background image is rendered.

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

.logo-panel {
  background-size: contain;
}

• cover — fills the area while preserving aspect ratio; some image parts may be cropped.
• contain — shows the whole image while preserving aspect ratio; empty space may remain.

CSS gradients

Gradients are generated images created directly in CSS. A linear gradient blends colors along a line.

.banner {
  background-image: linear-gradient(
    135deg,
    #0b1f3a,
    #0b7cff
  );
  color: white;
}

You can also use radial gradients:

.badge-area {
  background-image: radial-gradient(
    circle,
    #dbeafe,
    #eff6ff
  );
}

Gradient overlay on an image

Multiple backgrounds can layer a gradient over an image.

.hero {
  background-image:
    linear-gradient(rgb(15 23 42 / 0.7), rgb(15 23 42 / 0.7)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
}

background shorthand

The background shorthand can combine several background properties. It is compact, but can reset omitted background sub-properties.

.hero {
  background:
    #0f172a
    url("hero.jpg")
    center / cover
    no-repeat;
}

Border basics

A border has width, style and color. The border style must be visible, such as solid, for the border to render.

.card {
  border-width: 1px;
  border-style: solid;
  border-color: #dbe4ee;
}

The common shorthand is:

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

Common border styles

.solid  { border: 2px solid #0b7cff; }
.dashed { border: 2px dashed #0b7cff; }
.dotted { border: 2px dotted #0b7cff; }
.double { border: 4px double #0b7cff; }

Use decorative border styles carefully; a simple solid border is usually easiest to scan in application interfaces.

Individual border sides

You can style one side independently.

.note {
  border-left: 4px solid #0b7cff;
  padding-left: 1rem;
}

.table-row {
  border-bottom: 1px solid #e2e8f0;
}

border-radius

border-radius rounds the corners of the border box.

.card {
  border-radius: 12px;
}

.button {
  border-radius: 8px;
}

.pill {
  border-radius: 999px;
}

A very large radius is commonly used to create pill-shaped buttons or badges.

Make a circle

An equal-width, equal-height square can become a circle with border-radius: 50%.

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

Border vs outline

Unlike a border, an outline is drawn outside the border edge and normally does not take up layout space. It is useful for keyboard focus indicators.

button:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 3px;
}

Backgrounds, borders & accessibility

• Text ke peeche background par readable contrast maintain karo.
• Busy background images ke upar text rakhte waqt overlay ya solid surface consider karo.
• Important information sirf decorative background image me mat rakho.
• Error/success state ko sirf border color se communicate mat karo.
• Keyboard focus outline ko clearly visible rakho.
• Very thin low-contrast borders ko only separation cue mat banao when stronger grouping is needed.

Best practices

• Decorative backgrounds ko purposeful rakho.
• Large images ko optimize karo before using them as backgrounds.
• Repeated cards ke liye consistent border color and radius scale use karo.
• Background image ke saath fallback background color consider karo.
• Shorthands tab use karo jab unka reset behavior samajh ho.
• Rounded corners ka overuse avoid karo; design system me consistent values rakho.

Common beginner mistakes

• background-size: cover ko image cropping ke bina full image display samajhna.
• Background image ko meaningful content ke replacement ke roop me use karna.
• Text contrast test na karna.
• Border width/color set karke border-style bhool jana.
• Every component par different random radius use karna.
• Focus outline remove karke replacement na dena.
• Background shorthand use karke existing sub-properties accidentally reset karna.