Detailed explanation of the border attribute of CSS style

border usage details:

1, border-width AttributeSet the width of the border

Possible Value: Pixel

2, border-style Property sets the style of the border

Possible values: solid (straight line), dashed (dashed line), dotted (dotted line)

2, border-color Property sets the border color

Possible values: red,#f00,#ff0000,rgb(255,0,0),transparent

border-left Property setting left border

border-right Property setting right border

border-top Attribute setting top border

border-bottom Attribute setting bottom border

Extension extension

html code

<p></p>

<p></p>

css code

 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}

result

css Code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

Result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}

Result

The above is the detailed content of Detailed explanation of the border attribute of CSS style. For more information, please follow other related articles on the PHP Chinese website!