CSS border

CSS Border

##CSS Border Property

The CSS border property allows you to specify the style and color of an element's border.

Border Style

The Border Style property specifies what kind of border to display.

The border-style attribute is used to define the style of the border

border-style value:

none: Default is no border
dotted: dotted: Define a dotted line frame
dashed: Define a dotted line frame
solid: Define a solid line Boundary
double: Define two boundaries. The width of the two borders and the value of border-width are the same
groove: Define the 3D groove boundary. The effect depends on the color value of the border
ridge: Defines the 3D ridge border. The effect depends on the color value of the border
inset: Defines a 3D embedded border. The effect depends on the color value of the border
outset: Defines a 3D protruding border. The effect depends on the color value of the border

Example

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

Run the program to try it

Border width

You can specify the width for the border via the border-width property.

There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em; or use one of 3 keywords, which are thin, medium (default value) and thick.

Note: CSS does not define the specific width of the 3 keywords, so one user agent may set thin, medium, and thick to equal 5px, 3px, and 2px respectively, while another user agent The proxies are set to 3px, 2px and 1px respectively.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>

</html>

Note: The "border-width" attribute has no effect if used alone. You must first set the border using the "border-style" attribute.

Run the program and try it

Border color

The border-color property is used to set the border s color. Colors that can be set:

name - Specify the name of the color, such as "red"

RGB - Specify the RGB value, such as "rgb(255,0,0)"

Hex - Specify a hexadecimal value, such as "#ff0000"

You can also set the border color to "transparent".

Note: border-color does not work when used alone. You must first use border-style to set the border style.

Example

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.one
        {
            border-style:solid;
            border-color:red;
        }
        p.two
        {
            border-style:solid;
            border-color:#98bf21;
        }
    </style>
</head>

<body>
<p class="one">山河拱手，为君一笑 。</p>
<p class="two">如是颠簸生世亦无悔。</p>
</body>
</html>

Run the program and try it

Borders - set each individually Sides

In CSS, you can specify different borders for different sides:

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            border-top-style:dotted;
            border-right-style:solid;
            border-bottom-style:dotted;
            border-left-style:solid;
        }
    </style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

Run the program and try it

The border-style attribute can have 1-4 values:

border-style: dotted solid double dashed;

The upper border is dotted
The right border is solid
The bottom border is double
The left border is dashed

##border-style:dotted solid double;

The top border is dotted
The left and right borders are solid
The bottom border is double

border-style:dotted solid;

Top and bottom borders It is dotted
The right and left borders are solid

#border-style:dotted;

Border - shorthand attributeThe above example uses many attributes to set the border.

You can also set the border in a property.

You can set it in the "border" attribute:

Example

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

Run the program and try it out

More examplesSet the colors of the four borders

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>

Run the program and try it

CSS Border Properties

Attribute	Description
border	Abbreviation attribute, used to combine the four sides Properties are set in a statement.
border-style	is used to set the style of all borders of an element, or set the border style for each side individually.
border-width	Shorthand attribute, used to set the width of all borders of an element, or set the width of each border individually.
border-color	Shorthand attribute, sets the color of the visible part of all borders of the element, or sets the color for each of the 4 sides.
border-bottom	Abbreviation attribute, used to set all attributes of the bottom border into one statement.
border-bottom-color	Set the color of the bottom border of the element.
border-bottom-style	Set the style of the bottom border of the element.
border-bottom-width	Set the width of the bottom border of the element.
border-left	Abbreviation property, used to set all properties of the left border into one statement.
border-left-color	Set the color of the left border of the element.
border-left-style	Set the style of the left border of the element.
border-left-width	Set the width of the left border of the element.
border-right	Abbreviation property, used to set all properties of the right border into one statement.
border-right-color	Set the color of the right border of the element.
border-right-style	Set the style of the right border of the element.
border-right-width	Set the width of the right border of the element.
border-top	Abbreviation attribute, used to set all attributes of the top border into one statement.
border-top-color	Set the color of the top border of the element.
border-top-style	Set the style of the top border of the element.
border-top-width	Set the width of the top border of the element.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p>两个不同的边界样式。</p> </body> </html>

submit Reset Code

Automatic operation

CSS border

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]