Home > Article > Web Front-end > How to use css border-bottom-style property

How to use css border-bottom-style property

青灯夜游Original: 2019-05-30 14:59:253556browse

css border-bottom-style property is used to set the bottom border style of the element. The border may appear only when the property value is not none.

How to use the css border-bottom-style property?

border-bottom-style attribute sets the style of the bottom border of the element.

Attribute values that can be set:

● None: Specify no border

● hidden: Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.

● dotted: Specifies a dotted border.

● Dashed: Specify a dashed border.

● Solid: Specify a solid border.

● Double: Specify a double border.

● Groove: Define double lines. The width of the double line is equal to the value of border-width.

●ridge: Define a three-dimensional diamond border. The effect depends on the value of border-color.

● inset: Define a three-dimensional concave border. The effect depends on the value of border-color.

●outset: Define a three-dimensional convex border. The effect depends on the value of border-color.

● Inherit: Specifies that the border style should be inherited from the parent element.

Note: The border may appear only when the attribute value is not none. In CSS1, HTML user agents only need to support solid and none.

Note: Any version of Internet Explorer (including IE8) does not support the attribute value "inherit" or "hidden".

css border-bottom-style property example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>
<body>
<p class="none">无下边框</p>
<p class="dotted">点下边框</p>
<p class="dashed">虚线下边框</p>
<p class="solid">实线下边框</p>
<p class="double">双线下边框</p>
<p class="groove">凹槽下边框</p>
<p class="ridge">垄状下边框</p>
<p class="inset">嵌入下边框</p>
<p class="outset">外凸下边框</p>
</body>
</html>

Rendering:

How to use css border-bottom-style property

The above is the detailed content of How to use css border-bottom-style property. For more information, please follow other related articles on the PHP Chinese website!

css html double 继承 border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css left attributeNext article：How to use css left attribute

See more

How to use css border-bottom-style property

Related articles