How to set dotted border in css? Example of how to set dotted border with css-CSS Tutorial-php.cn

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

不言

Release： 2018-10-27 10:31:59

Original

23702 people have browsed it

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>

Copy after login

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;
    }

Copy after login

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>

Copy after login

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 Similarly, 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;
    }

Copy after login

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 This 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!