Backgrounds and borders
Backgrounds and borders turn plain text into a card, a button or a banner. A background can be an image, not only a color, and a border comes in different widths, styles and shapes.
Background image
background-image places an image under the element's content. The file path goes into url(), as in the src attribute, for example url("images/sky.jpg"). Here the image is a tiny SVG drawing embedded right in the CSS:
<style>
.dots {
height: 100px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='4' fill='orange'/></svg>");
}
</style>
<div class="dots"></div>By default the image repeats horizontally and vertically until it fills the whole block — that is why the circle became a pattern.
Repeat and size
background-repeat: no-repeat turns repeating off. background-size sets the image size: cover stretches it to cover the whole block (the edges may be cut off), while contain makes the whole image fit:
<style>
.pic {
height: 90px;
margin-bottom: 8px;
background-color: lightcyan;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='skyblue'/><circle cx='75' cy='18' r='10' fill='gold'/><rect y='45' width='100' height='15' fill='seagreen'/></svg>");
background-repeat: no-repeat;
}
.cover { background-size: cover; }
.contain { background-size: contain; }
</style>
<div class="pic cover"></div>
<div class="pic contain"></div>The upper block is fully covered by the image; in the lower one the image is visible in full, and the background color shows at the sides.
Background position
background-position moves the image inside the block: center, top, right bottom or exact values in pixels and percent. It is usually combined with cover so that the important part stays visible when the image is cropped:
<style>
.hero {
height: 80px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18' fill='tomato'/></svg>");
background-repeat: no-repeat;
background-position: right center;
background-color: mistyrose;
}
</style>
<div class="hero"></div>All these properties can be written as one background shorthand, for example background: lightcyan url("sky.jpg") center / cover no-repeat.
Border styles
The second word in border sets the line style. A border can also be drawn on one side only — border-left, border-bottom:
<style>
p { padding: 6px; }
.solid { border: 3px solid teal; }
.dashed { border: 3px dashed teal; }
.dotted { border: 3px dotted teal; }
.quote { border-left: 4px solid gold; }
</style>
<p class="solid">solid</p>
<p class="dashed">dashed</p>
<p class="dotted">dotted</p>
<p class="quote">A border on the left only — a common style for quotes.</p>Rounded corners
border-radius rounds the corners. It works without a border too — the background gets rounded. The value 50% on a square gives a circle:
<style>
.card { padding: 12px; background: lavender; border-radius: 12px; margin-bottom: 8px; }
.circle { width: 60px; height: 60px; background: coral; border-radius: 50%; }
</style>
<div class="card">A card with rounded corners</div>
<div class="circle"></div>Outline
outline looks like a border but is drawn outside and takes no space: neighboring elements do not move. The browser shows it around an element selected with the keyboard:
<style>
.o { padding: 8px; outline: 3px solid gold; outline-offset: 4px; }
</style>
<p class="o">An outline outside, with a 4px gap</p>Do not remove outline from links and buttons without a replacement: people using the keyboard rely on it to see where they are.
Common mistake
A border without a line style does not appear: the default style is none, meaning "no border". Width and color are not enough:
<style>
.a { padding: 6px; border: 2px crimson; }
.b { padding: 6px; border: 2px solid crimson; }
</style>
<p class="a">border: 2px crimson — no border</p>
<p class="b">border: 2px solid crimson — a border</p>