HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 12. BOX MODEL 129


12.1.3 Border


Next out from the padding is the border. It has thickness, color, and style.
It can have an actual image, like a picture frame.


Exam Question 219(p.349):Does border share the same background as
the content?
Required Answer:yes


Exam Question 220(p.349):Can border style be different on each of the
four sides?
Required Answer:yes


If part of the border is transparent, as with double, dotted, and dashed, it
shares the same background as the content and padding.


If the border thickness is zero, the border is invisible.


Border has several standard style options: none (invisible, zero-width bor-
der), hidden (similar to none), dotted, dashed, solid (a single line), double,
groove (the border appears to be carved inward), ridge (the border appears
to be poking outward), inset (the content appears to be pushed inward),
and outset (the content appears to be pushed outward).


Exam Question 221(p.349):Besides none and hidden, list the other eight
“border-style:” options.
Required Answer: dotted, dashed, solid, double, groove, ridge, inset,
outset


Thickness, color, and style can be different on each of the four sides. If you
want, you can have four different thicknesses, four different colors, and four
different styles.


Border Image: It is possible to construct custom picture frames, with
corners and edges exactly as you might like. The discussion is beyond the
scope of this chapter, but it is very entertaining, and the interested student
is invited to do a web search for border-image.


12.1.4 Margin


Next out from the border is the margin.


Margin has thickness but not color or style. The margin is always trans-
parent. Margin can be positive, zero, or negative. Adjacent margins may

Free download pdf