How to set a dotted border in html

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:

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

Recommend

How to install openssh from source code in centos 7

Environment: CentOS 7.1.1503 Minimum Installation...

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

Deploy grafana+prometheus configuration using docker

docker-compose-monitor.yml version: '2' n...

Solution for Tomcat to place configuration files externally

question When we are developing normally, if we w...

How to turn a jar package into a docker container

How to turn a jar package into a docker container...

Linux kernel device driver Linux kernel basic notes summary

1. Linux kernel driver module mechanism Static lo...

MySQL query duplicate data (delete duplicate data and keep the one with the smallest id as the only data)

Development Background: Recently, I am working on...

Teach you how to build hive3.1.2 on Tencent Cloud

Environment Preparation Before starting any opera...

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Table of contents Node connects to Mysql Install ...

How to recover files accidentally deleted by rm in Linux environment

Table of contents Preface Is there any hope after...

Detailed example of how to implement transaction commit and rollback in mysql

Recently, we need to perform a scheduled migratio...

How to set PATH environment variable in Linux system (3 methods)

1. In Windows system, many software installations...

Specific use of Linux which command

We often want to find a file in Linux, but we don...

Use nginx + secondary domain name + https support

Step 1: Add a secondary domain name to the Alibab...

JS implements dragging the progress bar to change the transparency of elements

What I want to share today is to use native JS to...