How to set the dotted line style of the border in css? (code example)

In web page layout, sometimes we need to set different border styles for the beauty of the overall web page. So how to set the dotted line style of the border? This article will introduce to you two ways to set the border dotted line style in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, we need to know that in CSS we use the border attribute to set the border. It can set the width, color, rounding angle, style (solid line, dotted line, double line, etc.) of the border.

Let’s use a simple code example to see how the border attribute of CSS sets the border dotted line.

html code:

<div class="demo">
	<p class="p1">这是一段测试文字1，实现虚线边框</p>
	<p class="p2">这是一段测试文字2，实现虚线边框</p>

</div>

css code:

	.p1 {
	border: 5px dashed #009999;
	padding: 10px;
}

.p2 {
	border: 5px dotted;
	border-color: linear-gradient(to right, red, yellow, blue);
	padding: 10px;

Rendering:

We can see It turns out that the CSS border property can set two different dotted line styles of the border, which are set through the two property values ​​of dotted and dashed in the border property. Let's take a look at the effect of border setting these two attribute values:

dashed value: You can define a dotted line so that the border can have a flat dotted line style.

dotted value: Define a dotted border so that the border appears in a continuous dotted shape, thus achieving a dotted dotted line style of the border.

Note: All browsers support the border attribute, so don’t worry about compatibility.

Summary: The above are the two ways of setting the border dotted line style in CSS introduced in this article. You can try it yourself and use different dotted line styles according to your needs. I hope it will be helpful to your learning. .

Related recommendations:

How to set the rounded corner style of the border in css? The border-radius property sets the rounded corner style

#How to remove the overlapping border in css?

The above is the detailed content of How to set the dotted line style of the border in css? (code example). For more information, please follow other related articles on the PHP Chinese website!