Creating web page dotted lines with border attribute in css

This article mainly introduces the dotted line (how to use the border attribute) in css production of web pages. Friends who need it can refer to

The dotted border border control dotted line of the border attribute here. The css height and css width configured below are 350 pixels.

One and four sides are dotted borders

border:1px dashed #000; black dotted border

Example:

CSS code:

.hackhome{border:1px dashed #000; height:50px;width:350px}

Html code: My four sides are black dotted borders

The abbreviated form of the configuration of the border here explains the hackhome selector's four-sided border is a 1px black dotted border

2. The left side is a dotted line:

CSS code:

 .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

Html code: My left side is a black dotted border

Here I configured a black dotted border on the left side

3. Dotted line on the right side:

CSS code:

 .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Html code: My right side is a black dotted border

The right side is configured with a black dotted border

4. Top The side (top) is a dotted line:

CSS code:

.hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

Html code: My top is a black dotted border

The top side (top edge) is configured here. Black dotted border

5. The bottom edge (lower edge) is dotted:

CSS code:

.hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html code: My lower edge is a black dotted border

Here is configured a black dotted border on one side of the bottom (bottom line)

6. If one side is not dotted, the other three sides are dotted

The right border is not dotted and there is no border , the other three sides are black dotted borders

CSS code:

 .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html code: My right border has no border and the other three sides are black dotted borders Example

Here first Configure the object with black 1px dotted borders on all four sides, and then configure one side with 0. This is equivalent to configuring the border dotted line attributes of 3 sides, but here pay attention to the order of configuring the border attributes.

The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use css The transition attribute implements the WeChat applet component with animated display and hiding

How webpack separates css and packages it separately

The above is the detailed content of Creating web page dotted lines with border attribute in css. For more information, please follow other related articles on the PHP Chinese website!