CHAPTER 12. BOX MODEL 131
Outline has the same style options that the border does, but these things
can NOT vary by side. You can only have one color, one thickness, and one
style.
12.1.6 Rounded Corners: Border-Radius
It is popular to be able to round the corners of a box. This can be easily done
with theborder-radiusattribute. The radii are specified in this order: nw
ne se sw. For example:
border-radius: 2px 4px 6px 8px;
That is, the northwest (top left) corner is specified first. In clock terminol-
ogy, this is the 10:30 position. Next is the northeast (top right) corner, the
1:30 position. Next the southeast (bottom right) corner, the 4:30 position,
and last the southwest (bottom left) position, the 7:30 position.
Exam Question 228(p.349):Which box model parameter creates rounded
corners?
Required Answer:border-radius
The rounding can be elliptical. You can specify two parameters for each
corner. Consult the web for examples.
12.2 Best Practices
Invest: Spend the necessary time to make your webpage easy to read. Oth-
erwise your readers will go away. Try hard to serve their needs.
Padding: Use it. If your words go smack up against pictures or screen edges
it reduces comprehension for your readers. Give some white space around
your paragraphs. I mean on all four sides. tl;dr? Big blocks of text get
skipped. Small blocks of text are not as daunting and are more likely to be
read, or at least started.
Width: Avoid wide columns. If you are presenting text for people to read,
your column should be narrow enough that their eyes can scan left to right
easily without losing their place. About 50em (70 characters) is a pretty
comfortable width. Think about newspaper columns, for example.
Length: Avoid long paragraphs. (tl;dragain.) Studies show that website
visitors tend to read the first line or two of the paragraph and then just skim