A border is a line drawn around an element, between its padding and its margin. The border shorthand sets three things at once: width, style and color.
index.html
HTML
<style>
.card {
border: 2px solid #d94a00;
padding: 14px;
max-width: 320px;
}
</style>
<div class="card">
<h3>Reading night</h3>
<p>Every second Thursday at 7pm.</p>
</div>2px solid #d94a00 means a two-pixel, solid, burnt orange line.
The three parts
| Part | Example | Notes |
|---|---|---|
| Width | 2px | How thick the line is |
| Style | solid | Required. Without it no border appears |
| Color | #d94a00 | Defaults to the element’s text color if left out |
The order does not matter, but most people write them in this order.
One thing that often surprises people
A border takes up space. Adding border: 4px solid to a box makes it 8px wider and taller in the default layout mode (4px per side). This is explained in The CSS Box Model and fixed by box-sizing.
warning
Border with no style
border: 3px red; shows nothing, because the style is missing. The default border style is none. Add solid.Exercise: a dashed frame
Give a div a 3px dashed green border and 12px of padding.
Show a possible solution
style.css
CSS
div { border: 3px dashed green; padding: 12px; }