CSS Border


CSS Border

##CSS Border (border) can be one or more lines around the content and padding of an element. For these lines, you can customize them style, width and color. Using CSS border properties, we can create better effects than HTML.

CSS Border Properties


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


There are borders on all four sides
Red bottom border

Rounded border

The left border has width and color is blue
Border style


The border style property specifies what kind of border to display.

border-styleThe property is used to define the style of the border

border-style value:

none: Default is no border

dotted: dotted: Define a dotted line box

dashed: Define a dotted line box

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 inset 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

Try it out:

Set the border style

Border width

You can pass the border-width attribute as The border specifies the width.

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>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

Run instance»

Click the "Run instance" button to view the online instance

Border color

The border-color attribute is used Set the color of the border. 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 The color is "transparent".

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

Instance

<!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">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Border - Set each side individually

In CSS, you can specify different borders on 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>2 different border styles.</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

The above example can also set a single attribute:

Instance

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

<body>
<p>2 different border styles.</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

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;

    • The top and bottom borders are dotted

    • The right and left borders are solid

  • border-style:dotted;

    • The four-sided borders are dotted

The above example uses border-style. However, it can also be used with border-width and border-color.

Border - abbreviation attribute

The 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:

  • border-width

  • border-style (required)

  • border-color

Instance

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

Running Example»

Click the "Run Example" button to view online examples

More examples

Instances: All border properties are in In a statement

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

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Run instance»

Click the "Run instance" button to view the online instance

This example demonstrates Use the shorthand attribute to set all four border properties in the same declaration.

Example: Set the style of the lower border

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

<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

This example demonstrates how to set the style of the lower border.

Example: Set the width of the left border

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

<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

This example demonstrates how to set the width of the left border.

Example: Set the color 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>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view online Example

This example demonstrates how to set the color of four borders. One to four colors can be set.

Instance: Set the color of the right border

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

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

CSS border property

PropertyDescription
borderAbbreviated attribute, used to set attributes for four sides in one 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-widthShorthand attribute, used to set the width of all borders of an element, or set the width of each border individually.
border-color Abbreviation attribute, set the color of the visible part of all borders of the element, or set 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-colorSet the color of the left border of the element.
border-left-style Set the style of the left border of the element.
border-left-widthSet 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-colorSet 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 property, used to set all properties of the top border into one statement.
border-top-colorSet the color of the top border of the element.
border-top-style Set the style of the top border of the element.
border-top-widthSet the width of the top border of the element.
←
→