Home  >  Article  >  Web Front-end  >  How to set dotted border in css? Example of how to set dotted border with css

How to set dotted border in css? Example of how to set dotted border with css

不言
不言Original
2018-10-27 10:31:5923675browse

In web page layout, sometimes it may be necessary to set a dotted border for the beauty of the overall web page. So how to set a dotted border? This article will introduce to you how to use css to set a dotted border.

First of all, we should know that the border of CSS is the border attribute, which can achieve the effect of object border, such as setting the border width, border color, border style (solid or dotted line), etc.

Let’s take a closer look at the method of setting the border dotted line using the css border attribute Dotted lines, while dotted sets square points to dotted lines. (Related recommendations:

css Learning Manual

) Next, let’s take a look at the implementation codes of the two dotted borders.

1. Use dashed to set the dotted border

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        border: dashed;
    }
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>

The effect of the dotted border is as follows:

How to set dotted border in css? Example of how to set dotted border with css If you want to add color to the dotted border and make the dotted border thinner, you can do this:

div{
        width: 100px;
        height: 100px;
    border: 2px dashed lightblue;
    }

The dotted border effect will become as follows:

How to set dotted border in css? Example of how to set dotted border with css

2. Use dotted to set the dotted border

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
    border: dotted;
    }    
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>

The effect of the dotted border is as follows:

How to set dotted border in css? Example of how to set dotted border with cssSimilarly, if you want to change the style of the above dotted border, you can change the code as follows:

div{
        width: 100px;
        height: 100px;
    border: 2px dotted lightblue;
    }

The effect of the dotted border is as follows:

How to set dotted border in css? Example of how to set dotted border with cssThis article ends here. For more exciting content, you can pay attention to the relevant column tutorials on the php Chinese website! ! !

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

Statement:
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