Theory
When lines have width
So far a line has been one pixel wide. But real graphics use thick lines, borders, strokes, emphasis, and once a line has width, new questions appear: how should its ends look, and how should two thick segments join at a corner?
This closing lesson of the line unit covers line styles: how thick lines are drawn, and the caps and joints that finish them neatly. These details matter: without them, thick lines have ragged ends and ugly, gapped corners. They are the polish on top of the drawing algorithms.
Theory
Drawing a thick line
A thick line has a width greater than one pixel. There are a few ways to draw one: stack extra pixels perpendicular to the line's direction, draw several adjacent parallel lines, or treat the thick line as a filled rectangle (a polygon) running along the path.
Whichever method, the result is a line with area rather than a single pixel trail. And that is exactly what creates the need for caps and joints: a shape with width has ends that occupy space and corners where two widths meet, both of which must be styled deliberately, or they look wrong.
At a glance
| Style | Type | Appearance |
|---|---|---|
| Butt cap | End | Flat, cut off exactly at the endpoint |
| Round cap | End | A semicircle extending past the endpoint |
| Square (projecting) cap | End | Flat, extended half the width beyond the endpoint |
| Miter joint | Corner | Outer edges extended to a sharp point |
| Round joint | Corner | A rounded corner |
| Bevel joint | Corner | A flat cut across the corner |
Theory
Caps and joints
Line caps decide how a thick line ends. A butt cap is flat and stops exactly at the endpoint. A round cap adds a semicircle just past the end (a soft, rounded finish). A square (projecting) cap is flat but extends half the line's width beyond the endpoint.
Line joints (joins) decide how two thick segments meet at a corner. A miter joint extends the outer edges until they meet at a sharp point (like a picture frame corner). A round joint gives a rounded corner. A bevel joint makes a flat cut across the corner. Choosing caps and joints is how you make thick lines and shapes look clean and intentional, not ragged.
Quiz
Where two thick line segments meet at a corner, which joint extends their outer edges to a sharp point?
- A round joint, because it is pointed
- A miter joint, which extends the outer edges until they meet at a sharp point
- A bevel joint, because it is sharp
- A butt cap, because it ends the line
Show the answer
A miter joint, which extends the outer edges until they meet at a sharp point
A miter joint extends the outer edges of the two thick segments until they meet at a sharp point, giving a crisp, pointed corner (like a picture frame). Option A is wrong: a ROUND joint gives a rounded, not pointed, corner. Option C is wrong: a BEVEL joint makes a flat cut across the corner, the opposite of a sharp point. Option D confuses categories: a butt CAP is about how a line ENDS, not how two segments JOIN at a corner. Remember: caps finish line ends (butt, round, square), joints handle corners (miter = sharp point, round = curved, bevel = flat cut).
Think first
Why do thick lines need caps and joints when thin lines do not?
A one-pixel line just ends and turns. Why does adding width create the need for caps and joints? Then tap.
Show the answer
Because giving a line WIDTH turns it from a trail of single pixels into a SHAPE WITH AREA, and shapes have ends and corners that occupy space and must be defined, whereas a one-pixel line has no such width to resolve. Think about the ends first. A thin line ends at a single pixel, there is nothing to decide. But a thick line is, in effect, a long rectangle; its end is a whole EDGE with width, and you must decide the shape of that edge: cut flat exactly at the endpoint (butt), round it off (round), or extend it a bit past the endpoint (square). Different choices look different and suit different designs, so the end style, the cap, becomes a real decision. Now the corners. When two thin lines meet, one pixel simply connects to the next. But when two THICK segments meet at an angle, their widths do not automatically fit together: on the outside of the bend there is a gap or overshoot where the two rectangles' outer edges do not naturally meet, and you must decide how to fill that corner, extend the edges to a sharp point (miter), round it (round), or slice it flat (bevel). Without a defined joint, the corner would look broken, gapped, or spiky. So caps and joints are not decorative extras; they are the necessary consequence of a line having area: any shape with width has ends and corners that must be given a form. This is why graphics systems (and drawing tools, and CSS) all provide cap and join options. Width creates area, and area creates ends and corners that must be styled.
Summary
Key takeaways
- A thick line has width greater than one pixel, drawn by stacking perpendicular pixels, parallel lines, or a filled rectangle along the path.
- Having width gives the line area, which creates the need to style its ends and corners.
- Line caps finish a thick line's ends: butt (flat at the endpoint), round (semicircle past it), square/projecting (flat, extended half-width past it).
- Line joints handle corners where two thick segments meet: miter (outer edges to a sharp point), round (rounded), bevel (flat cut).
- Line style can also mean the pattern: solid, dashed, or dotted.
- Caps and joints make thick lines and shapes look clean rather than ragged or gapped.
- Memory hook: width makes area; caps finish the ends (butt/round/square), joints finish the corners (miter/round/bevel).