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

border-bottom: value;

border-bottom-style:value;

border-bottom-color: value;

border-bottom-width:value;

For example:

border-bottom: solid 1px #ffff00;

border-bottom-style: offset;

border-bottom-color: #0000ff;

border-bottom-width:15px;

The border-bottom attribute 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.

For the value of the style of the border-bottom attribute, please refer to the style of the edge. 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 line respectively:

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

border-bottom value and its description
Attribute	Value	Description
border-bottom	solid	The lower edge is a solid line Other values include: groove, dotted, etc. For details, please refer to the edge style.
	1px	The width of the lower edge Using numerical values can represent any width of the edge. In addition to px, the numerical units also include em and ex. For details, please refer to the numerical value + unit Use keywords to specify thin (thin), medium (normal), thick ( thick)
	#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: transparent

Examples

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 linked to 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>

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

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

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

</body>

</html>

Copy after login

Reference reading: http://www.manongjc.com/article/1190.html