How to set a dotted border in html

Use CSS styles and HTML tag elements

In order to add dotted borders to different HTML tags, we select several commonly used tags to align and set the dotted border effect.

1. Commonly used tags in HTML

p tag

span

ul li

table tr td

2. Examples of CSS property words used

border

width

height

3. Key points of implementing dotted lines with CSS

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

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

4. Example description

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

5. Complete HTML code:

 <!DOCTYPE html> <html>
 <head> <meta charset="utf-8" />
 <title>html border dotted line demonstration www.pcss5.com</title> <style>
 .bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css comment: let span form a block*/
 </style> </head>
 <body> <p class="bor">p box</p>
 <span class="bor">span box</span> <ul class="bor">
 <li>ul li list</li> <li>ul li list</li>
 </ul> <table class="bor">
 <tr> <td>Table</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 dashed line.

6. Browser effect screenshots

Screenshot of setting border dashed line effect for different tags in html

<<: Understanding and example code of Vue default slot

>>: CSS makes the child container exceed the parent element (the child container floats in the parent container)

How to migrate the data directory in mysql8.0.20

How to set a dotted border in html

How to migrate the data directory in mysql8.0.20

A great collection of web standards learning resources

Analyze the duration of TIME_WAIT from the Linux source code

Vue uses canvas handwriting input to recognize Chinese

Summary of commonly used SQL in MySQL operation tables

Analysis of Facebook's Information Architecture

Element tree control integrates a drop-down menu with icons (tree+dropdown+input)

Summary of MySQL development standards and usage skills

MySQL 8.0.17 installation and configuration method graphic tutorial

Unity connects to MySQL and reads table data implementation code

Recommend

One sql statement completes MySQL deduplication and keeps one

MySQL 8.0.18 installation and configuration method graphic tutorial under win10 (windows version)

Vue implements scrollable pop-up window effect

Detailed tutorial on installing MariaDB on CentOS 8

MySQL community server 8.0.16 installation and configuration method graphic tutorial under Windows

Example code for implementing ellipse trajectory rotation using CSS3

Beginner's guide to building a website ⑦: It's so easy to make a beautiful website

A brief discussion on JS regular RegExp object

Podman boots up the container automatically and compares it with Docker

CSS3 realizes the effect of triangle continuous enlargement

Detailed explanation of monitoring NVIDIA GPU usage under Linux

Analysis of the new features of MySQL 8.0 - transactional data dictionary and atomic DDL

Basic commands for MySQL database operations

Summary of some problems encountered when integrating echarts with vue.js

Detailed explanation of Truncate usage in MYSQL