Home > Article > Web Front-end > How to write dotted line style of text border using css? (example)
How to write dotted line style of text border using css? (example)
- 藏色散人Original
- 2018-08-14 14:59:474211browse
This article mainly introduces to you how to write the style of css text dotted border. I hope it will be helpful to friends in need. Here I will give you an example of how to set css border lines.
The code is as follows:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css边框线怎么设置的例子</title>
<meta charset="UTF-8">
<style type="text/css">
p
{
width: 550px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>css border 外边框、css边框线怎么设置?</p>
</div>
</body>
</html>The effect is as follows:
As shown here, simply use the border attribute Added a border to a piece of text and added color.
Then next, I will introduce to you how to set the css dotted line box:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css虚线框的例子</title>
<meta charset="UTF-8">
<style type="text/css">
p
{
width: 550px;
border-color:red;
border-style:dotted ;
}
</style>
</head>
<body>
<div>
<p>css设置文字虚线边框、css文字虚线边框、html虚线框、css边框虚线代码</p>
</div>
</body>
</html>The effect is as follows:
It is mentioned here Very important attribute border-style:dotted;
The border-style attribute is used to set the style of all borders of an element, or to set the border style for each side individually. The border may appear only if this value is not none.
The dotted value here is to define the dotted border. That is shown as the dotted box in the picture above.
Note: All browsers support the border-style attribute.
【Recommended related articles】
How to write css rounded border code? (Code example)
Share the sample code for adding a border style to a div
Detailed explanation of how to implement border border color gradient code in css
The above is the detailed content of How to write dotted line style of text border using css? (example). For more information, please follow other related articles on the PHP Chinese website!