Home > Article > Web Front-end > Can I control the display of dotted lines in css?

Can I control the display of dotted lines in css?

青灯夜游Original: 2022-09-14 14:16:292269browse

Can control the display of dotted lines in css. In CSS, you can use the border-style attribute to set the dashed border style. You only need to add the "border-style:dashed;" style to the element; the border-style attribute is used to set the style of the element border. When the value is "dashed ”, you can define the dotted border style.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

You can control the display of dotted lines in css, just use the border-style attribute.

The border-style attribute is used to set the style of the element border. When the value is "dashed", the dashed border style can be defined.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p.dashed {
				border-style: dashed
			}
			
			p.solid {
				border-style: solid
			}
		</style>
	</head>

	<body>

		<p class="dashed">这是虚线边框样式！</p>

		<p class="solid">这是实线边框样式！</p>

	</body>

</html>

Can I control the display of dotted lines in css?

The value that the border-style attribute can be set

Value	Description
none	Define no borders.
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.
inherit	Specifies that the border style should be inherited from the parent element.

Explanation:

The border-style attribute is a shorthand attribute that can set the style of the four borders of an element. If you want to set a separate border The style can be realized:

border-top-style attribute: top border style
border-bottom-style attribute: bottom border style
border-left-style attribute: left border style
border-right-style attribute: right border style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p.dashed {
				border-top-style: dashed;
				border-bottom-style: dashed
			}
			
			p.solid {
				border-left-style: solid;
				border-right-style: solid;
			}
		</style>
	</head>

	<body>

		<p class="dashed">这是虚线边框样式！</p>

		<p class="solid">这是实线边框样式！</p>

	</body>

</html>

Can I control the display of dotted lines in css?

（Learning video sharing: web front-end）

The above is the detailed content of Can I control the display of dotted lines in css?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 double 继承 border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does css strikethrough code mean?Next article：What does css strikethrough code mean?

See more

Can I control the display of dotted lines in css?

Related articles