A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width
, style
, and color
:
width
—The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords:thin
,medium
, orthick
.style
—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include:none
,dotted
, andsolid
.color
—The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
p { border: 3px solid coral; }
In the example above, the border has a width of 3 pixels, a style of solid
, and a color of coral
. All three properties are set in one line of code.
The default border is medium none color
, where color
is the current color of the element. If width
, style
, or color
are not set in the CSS file, the web browser assigns the default value for that property.
p.content-header { height: 80px; width: 240px; border: solid coral; }
In this example, the border style is set to solid
and the color is set to coral
. The width is not set, so it defaults to medium
.
Instructions
Add a dotted red border with 1-pixel thickness to all h2
headings.
Add a solid, white border, with a 3 pixel width, to the #banner .content h1
rule.