Home > Article > Web Front-end > css border-bottom (specify the style, width and color of the bottom border)
css border-bottom (specify the style, width and color of the bottom border)
- WBOYOriginal
- 2016-09-21 13:56:033624browse
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
| 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;
}
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>
Reference reading: http://www.manongjc.com/article/1190.html