How to set dotted borders in html

Author：Eve Cole Update Time：2025-05-15 03:16:01

Use CSS styles and HTML tag elements

In order to add border dotted lines to different html tags, we select several common label alignments to set the border dotted line effect.

1. Common html tags

p tag

span

ul li

table tr td

2. CSS attribute words are used in the example

border

width

height

3. Introduction to the key points of implementing dotted lines

border is a border attribute. If you want to achieve the border effect of an object, you need to set the border width, border color, and border style (solid or dotted lines)

border:1px dashed #F00 This is to set the border style width to 1px, the dotted line and the dotted line to red.

4. Example description

We set the same width, same height, and border effects for the above labels.

5. Complete HTML code:

 <!DOCTYPEhtml><html>
 <head><metacharset=utf-8/>
 <title>html border dotted line demonstration www.pcss5.com</title><style>
 .bor{border:1pxdashed#F00;width:300px;height:60px;margin-top:10px}span{display:block}/*css comment description: Let the span form a block*/
 </style></head>
 <body><pclass=bor>pbox</p>
 <spanclass=bor>span box</span><ulclass=bor>
 <li>ulli list </li><li>ulli list </li>
 </ul><tableclass=bor>
 <tr><td>Form</td>
 <td>Table 2</td></tr>
 <tr><td>Data</td>
 <td>Data 2</td></tr>
 </table></body>
 </html>

The above example sets the same style for different tags in html, including the same border dotted lines.

6. Browser effect screenshot

Screenshot of the dotted effect of different tags in html set borders and dotted lines