CHAPTER 6 ■ BOX MODELS PROPERTIES
Border cont.Solution cont. The border can have either a predefined style (solid line, double line, dotted line, pseudo-3D
border, and so on) or an image for background. The border-style property can have a value
of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset.
With CSS3, borders can now have rounded corners with the use of the border-radius
property: for example, border-top-left-radius: 2em 0.5em. The two length or percentage
values of these properties define the radii of a quarter ellipse that defines the shape of the
corner of the outer border edge. The first value is the horizontal radius, and the second is the
vertical radius. If the second value is omitted, it’s copied from the first. Browser support for
these properties varies, and some vendors may support their own prefixes like -moz-border-
radius or -webkit-border-radius.The box-shadow property attaches one or more drop-shadows to a box. The property is a
comma-separated list of shadows, each specified by two to four length values, an optional
color, and an optional inset keyword: for example, box-shadow: rgba(0,0,0,0.4) 10px
10px inset. The Safari browser requires -webkit for box-shadow: for example, -webkit-box-
shadow: rgba(0,0,0,0.4) 10px 10px inset.
The CSS3 spec defines a way to add images to borders and specify their style with properties
like border-image-source, border-image-slice, border-image-width, border-image-
outset, and border-image-repeat, but these aren’t yet widely supported by major
browsers.