Detailed explanation of three ways to set borders in HTML

Three ways to set borders in HTML

border-width: 1px 2px 2px;
border-style: solid dashed dotted;
border-color:red green blue;
/*Set the top→left→bottom borders respectively*/

1. The composition of the frame:

border: 1px solid #fff

parameter:

The first one is the border thickness 1px

The second is the border style solid dashed dotted (not compatible with different browsers)

The third is the border color red. Use English words to represent the color directly #f00. The hexadecimal representation of the color is rgb(255,0,0).

2. Composite Style

/*border: 1px solid red; /*Compound style*/

3. Single setting

border-width: 1px 2px 2px 1px;
border-style: solid dashed dotted solid;
border-color:red green blue pink;
/*Set the top→right→bottom→left borders respectively*/

This means that the top border, right border, bottom border, and left border are set for the four borders respectively.

border-width: 1px 2px;
border-style: solid dashed;
border-color:red green;
/*Set the upper, lower, left and right borders respectively*/

Two values ​​represent: top and bottom borders, left and right borders

The three values ​​represent: top border, left border, bottom border (I don’t know why it is divided like this, maybe it is unified)

You can also set each border individually!

border-top;
border-right;
border-bottom;
border-left;

But work should not be so segmented. Because it's not only a lot of work but also weird and unsightly.

This concludes this article on the three ways to set HTML borders. For more relevant HTML border settings, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!