CSS border-width

 CSS border-width is used to set the width of the border. It can also be said to set the thickness of the border. The border thickness of web page elements can be set by border-width. For example , the border width of DIV block and span area can be set by border- width is set. In addition, border-width is usually used together with border-style (border style) and border-color (border color) to present a complete border visual design. All major browsers support css border-width The attribute syntax.

CSS border-width basic syntax

description	grammar
Set the width of four borders at once	border-width: width;
Set the width of the border of four separately	border-width: top border width, right border width, bottom border width, left border width;
Set the upper and lower borders and the left and right borders separately	border-width: the width of the upper and lower borders, the width of the left and right borders;

CSS border-width common units such as px, em, cm, thin (thin), medium (medium), thick (thick), etc.

CSS border-width example 1. The widths of all four sides are the same

<div style="border-color:#aaaaee;border-style:solid;border-width:3px;padding:5px;">
Test the effect of border width
</div>

The output of the above example is

Test the border width effect

The example uses border-width: 3px, which means that the width of the four borders is the same as 3px. At the same time, border-style and border-color syntax are used to present the complete border style rendering effect. Each attribute is indispensable, unless you use the full wording of border , you can include all attributes at once.

CSS border-width example two, set the width of the four sides independently

<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px 9px 12px;padding:5px;">
test the effect of border width
</div>

The output of the above example is

Test the border width effect

Please note that if you want to set the different widths of the four borders, you must write the upper, right, lower, and left widths in sequence. This is the standard order specified by CSS. In the example, "border-width: 3px 6px 9px 12px;" The wording means that the width of the upper border is 3px, the width of the right border is 6px; the width of the lower border is 9px, and the width of the left border is 12px.

CSS border-width example three, the upper and lower sides have the same width and the left and right borders have the same width

<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px;padding:5px;">
test the effect of border width
</div>

The output of the above example is

Test the border width effect

In the example, "border-width: 3px 6px;" means that the width of the upper and lower borders is 3px, and the width of the left and right borders are 6px. The three different writing styles of CSS border-width provide designers with a very flexible design method. In fact, these three writing styles do not have much difference in operational efficiency. They are purely convenient for designers to write, but usually all four sides are When setting the same width, only the first and simplest way of writing is used, so that it will be more efficient in future management.