How to set the border to dotted line in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set the border to dotted line in html

王林

Jun 17, 2021 pm 05:35 PM

html dotted line frame

htmlThe way to set the border to a dotted line is to add the border-style attribute to the border and set the attribute value to dashed, for example [p.dashed {border-style:dashed;}].

How to set the border to dotted line in html

The operating environment of this article: windows10 system, html 5, thinkpad t480 computer.

We can use the border-style attribute to set the style of the border. Using this attribute, you will find that it is very simple to set the border to a dotted line.

There may be many students who are not familiar with the border-style attribute. Let’s take a look at this attribute.

The border-style attribute sets the style of the four borders of an element.

Commonly used attribute values are:

none defines no border
##hidden is the same as "none". However, except when applied to tables, for tables, hidden is used to resolve border conflicts
dotted Define dotted borders. Renders as a solid line in most browsers
dashed Defines a dashed line. Rendered as a solid line in most browsers
solid Define a solid line

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

Copy after login

Running results As shown below:

How to set the border to dotted line in html

Related recommendations:

html video tutorial

The above is the detailed content of How to set the border to dotted line in html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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