CSS Box Model : borders

 THE BOX MODEL

Borders

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, or thick.
• style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.
• 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:

1.Add a dotted red border with 1-pixel thickness to all h2 headings.

Hint:

The syntax for a border declaration can be written as:

border: width style color;

Remember to put the space in between each value!

2.Add a solid, white border, with a 3 pixel width, to the #banner .content h1 rule.

Hint:

To set a size in pixels, use the px format.

Question

Is it possible to set a border 78 for one or two sides of the element?

Answer

Yes! Sometimes we want to make text look as if it has been underlined or sandwiched between two lines. It is not really possible through the border property but we can use its derivatives:

border-top

border-right

border-bottom

border-left

Each one of them follows the same value structure for border: width style color;

So, to have a white top and bottom lines on a paragraph tag that is 2 pixels wide, we would write something like this:

p{

border-top: 2px solid white;

border-bottom: 2px solid white;

}

and then you can see something like this:

21%20PM729×71 1.29 KB