CSS box model border settings: border: 1px solid red (pixel style color), border-bottom: 1px dotted #ccc_html/css_WEB-ITnose

Box model - border (1)

The border of the box model is the line surrounding the content and filler. You can set the thickness, style and color of this line (three borders property).

For example, the following code is for a div to set a border with a border thickness of 2px, a solid style, and a red color:

div{    border:2px  solid  red;}

The above is the abbreviation of the border code, which can be written separately:

div{    border-width:2px;    border-style:solid;    border-color:red;}

Note:

1. Border-style (border style) common styles are:

dashed (dotted line) | dotted (dotted line) line) | solid (solid line).

2. The color in border-color (border color) can be set to hexadecimal color, such as:

border-color:#888;//前面的井号不要忘掉。

3. border-width ( The width in border width) can also be set to:

thin | medium | thick (but not very commonly used), and pixels (px) are most commonly used.

Box model - border (2)

Now there is a problem. If you want to set the lower border separately for the p tag, and the other three sides are What should I do if I don’t set the border style? The css style allows you to set the style for the border in only one direction:

div{<strong>border-bottom</strong>:1px solid red;}

You can also use the following code to set the top, right, and left borders on the other three sides:

border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;