Home >Web Front-end >CSS Tutorial >How to set div border with css

How to set div border with css

藏色散人
藏色散人Original
2021-04-02 13:43:4013573browse

How to set the div border in css: first create an HTML sample file; then define the div block; and finally set the border style through the "border-style" attribute.

How to set div border with css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

The border attribute is an abbreviated attribute, which can set all in one statement border properties. Example: border width, border style, border color.

You can set the following attributes in order:

border-width: Specifies the width of the border.

border-style: Specifies the style of the border.

How to set div border with css

border-color: Specifies the color of the border.

If you do not set one of the values, there will be no problem. For example, border:solid #ff0000; is also allowed.

Browser support

How to set div border with css

The number in the table indicates the first browser version number that supports this attribute.

All browsers support the border attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin: 10px;
}
div.none {
border: none;
}
div.dotted {
border:3px dotted pink;
}
div.dashed {
border:3px dashed paleturquoise;
}
div.solid {
border:3px solid peru;
}
div.double {
border:3px double #009999;
}
div.groove {
border:3px groove #CCC;
}
div.ridge {
border:3px ridge;
}
div.inset {
border:3px inset;
}
div.outset {
border:3px outset;
}
div.hidden {
border: hidden;
}
</style>
</head>
<body>
<div class="none">无边框。</div>
<div class="dotted">虚线边框。</div>
<div class="dashed">虚线边框。</div>
<div class="solid">实线边框。</div>
<div class="double">双边框。</div>
<div class="groove">凹槽边框。</div>
<div class="ridge">垄状边框。</div>
<div class="inset">嵌入边框。</div>
<div class="outset">外凸边框。</div>
<div class="hidden">隐藏边框。</div>
</body>
</html>

Rendering:

How to set div border with css

Recommended study: "css video tutorial"

The above is the detailed content of How to set div 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