Home > Article > Web Front-end > How to use css border-top-width property
How to use css border-top-width property
- silencementOriginal
- 2019-05-28 14:10:532790browse
css border-top-width attribute definition and usage
In css, the border-top-width attribute is used to set the top of an element Border width, when we want to set the width of the top border of an element individually, we can use this attribute. If we also want to set other properties of the top border of the element (border-top-style property, border-top-color property), we can use the border-top property to define the top border properties of these elements into a statement. You can write fewer lines of code and make it more readable.
Note: Using the border-top-width attribute alone on an element will not have any effect, because the element border is transparent by default. Setting the width of a transparent border will not have any effect, so use border-top-width. Attributes must define the top border style (border-top-style).
css border-top-width property syntax format
css syntax: border-top-width: thin / medium / thick / length / inherit
JavaScript syntax: object.style.borderTopWidth="thin / medium / thick / length / inherit"
css border-top-width property value description
thin: Thin border
medium: medium border (default)
thick: thick border
length: custom border width (example: 8px;)
Inherit: Inherit the border width from the parent element
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top-width属性设置顶部边框宽度笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top:18px;width:360px;border-top-style:solid;}
#a{border-top-width:thin;}
#b{border-top-width:medium;}
#c{border-top-width:thick;}
#d{border-top-width:6px;}
</style>
</head>
<body>
<div id = "a">thin：细的边框</div>
<div id = "b">medium：中等的边框（默认）；</div>
<div id = "c">thick ：粗的边框；</div>
<div id = "d">6px：自定义边框的宽度为6px；</div>
</body>
</html>Running result
The above is the detailed content of How to use css border-top-width property. For more information, please follow other related articles on the PHP Chinese website!