Home > Article > Web Front-end > How to set dotted border in css
How to set dotted border in css
- 青灯夜游Original
- 2021-07-07 18:02:485422browse
You can use the border-top-style attribute to set the dashed border in css. You only need to add the "border-top-style:dashed;" style to the element. The border-top-style attribute can set the top border style of the element. When the value is dashed, the dashed line style can be defined.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS, you can use the border-top-style attribute to set the dotted border.
The border-top-style attribute can set the top border style of the element. When the value is dashed, the dashed line style can be defined.
Let’s take a look at the code example below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.dashed {border-top-style:dashed;}
</style>
</head>
<body>
<p class="dashed">虚线上边框样式</p>
</body>
</html>Rendering:
Expand knowledge: border- The values that can be set for the top-style attribute
| Value | Description |
|---|---|
| none | Define no border. |
| hidden | Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts. |
| dotted | Define dotted border. Renders as a solid line in most browsers. |
| dashed | Define dashed line. Renders as a solid line in most browsers. |
| solid | Define a solid line. |
| double | Define double line. The width of the double line is equal to the value of border-width. |
| groove | Define the 3D groove border. The effect depends on the value of border-color. |
| ridge | Define the 3D ridge border. The effect depends on the value of border-color. |
| inset | Define the 3D inset border. The effect depends on the value of border-color. |
| outset | Define the 3D outset border. The effect depends on the value of border-color. |
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set dotted border in css. For more information, please follow other related articles on the PHP Chinese website!