Home >Web Front-end >CSS Tutorial >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:5923701browse
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 borderThe 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:
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:
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:
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;
}The effect of the dotted border is as follows:
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!