border-bottom (Specify the style, width and color of the bottom line)

border-bottom: value;

border-bottom-style: value;

border-bottom-color: value;

border-bottom-width: value;

Such as:

border-bottom: solid 1px #ffff00;

border-bottom-style: outset;

border-bottom-color: #0000ff;

border-bottom-width:15px;

border-bottomAttribute is used to specify the style, width and color of the bottom border. The values are separated by half-width spaces and there is no order.

Regarding the value of the style of the border-bottom attribute, please refer to the style of the edge for details. The value of the width of the edge. For details, please refer to the width of the edge.

Use the following attributes when specifying the style, width, and color of the bottom border respectively:

border-bottom-color: The color of the bottom border
border-bottom-style: The style of the bottom line
border-bottom-width: Bottom The width of the border

The value of border-bottom and its description
Attribute	Value	Instructions
border-bottom	solid	The lower border is solid Line Other values include: groove, dotted, etc. Please refer to the edge style for details.
	1px	The width of the lower border Use numerical values to represent any width of the border. In addition to px, the numerical units include em, ex, please refer to the value + unit for details Use keywords to specify thin (fine), medium (normal), thick (coarse)
	#ff0000	The color of the lower edge In addition to using color codes to indicate specific colors, the edge can also be specified as transparent, that is: transparent

Example

css file

.sample1,.sample2,.sample3{

margin:0.5em;

padding:2px;

}

.sample1 {border-bottom: solid 1px #ffff00;}

.sample2 {border-bottom: groove 10px #00ff00;}

.sample3 {border-bottom-style: ridge;

border-bottom-color: #0000ff;

border-bottom-width:15px;

}

Copy after login

HTML file that links the above css file

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">

<link href="material/border-bottom.css" rel="stylesheet" type="text/css" />

<title>border-bottom属性（http://wwww.manongjc.com）</title>

</head>

<body>

<p class="sample1">sample1：下边线 solid 1px #ffff00</p>

<p class="sample2">sample2：下边线 groove 10px #00ff00</p>

<p class="sample3">sample3：分别指定下边线的样式、宽度、颜色 </p>

</body>

</html>

Copy after login

The above is the detailed content of Detailed explanation of css border-bottom usage. For more information, please follow other related articles on the PHP Chinese website!