Home >Web Front-end >CSS Tutorial >How to set css border line
How to set css border line
- 清浅Original
- 2018-12-11 16:55:2730339browse
How to set the css border line: You can set the border line through the border-style attribute. The border-style attribute can be set to dotted, dotted, solid, 3D groove border, ridge border, 3Dinset border, etc.
[Recommended course: CSS tutorial]
Set css border line Method:
Border style border-style
This attribute is used to set the style of all borders of the element, or to set the border for each side individually. Style
Border styles have the following types:
none: No border defined, that is, no border
dotted: Border The style is dotted border
dashed: the border style is dashed
solid: the border style is solid line, rendered in most browsers is a solid line.
double: The border style is double line. The width of the double line is equal to the value of border-width.
groove: The border style is a 3D groove border, and its effect depends on the value of border-color.
#ridge: The border style is a ridge border, and its effect depends on the value of border-color.
inset: The border style is a 3D inset border, and its effect depends on the value of border-color.
outset: The border style is a 3D outset border, and its effect depends on the value of border-color.
#inherit: The border style should be inherited from the parent element.
Case:
Set the upper edge of the border to dots, the lower edge to dotted lines, and the left and right sides to solid lines
div{
width:100px;
height: 100px;
border-style: dotted solid dashed solid;
border-color: pink;
} The rendering is as follows:
Set the border to 3D groove and ridge border
<style type="text/css">
.box1{
width:100px;
height:30px;
border:5px groove pink;
margin-bottom: 5px;
}
.box2{
width:100px;
height:30px;
border:5px ridge pink;
}
</style>
</head>
<body>
<div class="box1">3D 凹槽边框</div>
<div class="box2">垄状边框</div>
</body>Rendering
Summary: The above is the entire content of this article. I hope it will be helpful to everyone in learning border styles.
The above is the detailed content of How to set css border line. For more information, please follow other related articles on the PHP Chinese website!