How to use css border-top-width property-CSS Tutorial-php.cn

How to use css border-top-width property

silencement

Release： 2019-05-28 14:10:53

Original

2806 people have browsed it

How to use css border-top-width property

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>

Copy after login

Running result

How to use css border-top-width property

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!