Article From:https://www.cnblogs.com/zoulixiang/p/9969079.html
CSS Border instance:
The border of an element is one or more lines around the content and inner margin of the element.

CSS border Attributes allow you to specify the style, width, and color of element borders.

CSS Border
Attribute description
border Abbreviated attributes, used to set attributes for four sides in a declaration.
border-style Use to set the style of all borders of an element, or set the border style for each side separately.
border-width Short attributes, used to set the width for all borders of an element, or separately for each borders.
border-color Abbreviate attributes, set the color of all visible parts of the element's borders, or set colors for each of the four borders.
border-bottom Short attributes, which are used to set all attributes of the lower border to a declaration.
border-bottom-color Set the color of the lower border of the element.
border-bottom-style Set the style of the lower border of the element.
border-bottom-width Set the width of the lower border of the element.
border-left Short attributes, which are used to set all attributes of the left border to a declaration.
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 Sets the width of the left border of the element.
border-right Short attributes, which are used to set all attributes of the right border to a declaration.
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 Short attributes, which are used to set all attributes of the upper border to a declaration.
border-top-color Set the color of the upper border of the element.
border-top-style Set the style of the upper border of the element.
border-top-width Set the width of the upper border of the element.

##################

Definition and Usage
border-style Property is used to set the style of all borders of an element, or to set the border style for each side separately.

The border may appear only if the value is not none.

Example 1
border-style:dotted solid double dashed;
The upper border is dotted.
The right border is solid
The lower border is double-wired.
The left border is dotted
####################
Possible value
Value description
none Definition without borders.
hidden Same as none. Except when applied to tables, hidden is used to resolve border conflicts for tables.
dotted Define a dotted border. In most browsers it appears as a solid line.
dashed Define dashed lines. In most browsers it appears as a solid line.
solid Define solid lines.
double Define two lines. The width of the two lines is equal to the value of border-width.
groove Define 3D groove borders. The effect depends on the border-color value.
ridge Define 3D ridge border. The effect depends on the border-color value.
inset Define the 3D inset border. The effect depends on the border-color value.
outset Define the 3D outset border. The effect depends on the border-color value.
inherit Provides that the border style should be inherited from the parent element.
##########################



1.All border properties are in one declaration
This example demonstrates using abbreviated attributes to set all four border attributes in the same declaration.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{border:medium double rgb(250,0,255)}
</style>
</head>
<body>

<p>Some text</p>
</body>

2.Setting Quadrilateral Style
This example demonstrates how to set a quadrilateral style.
<style type="text/css">
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: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

3.Set different borders on each side
This example demonstrates how to set different borders on each side of an element.
<style class="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style:groove double}
p.three {vorder-style:solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<P class="doublesolid">Some text</P>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>

4.All border width attributes are in one declaration
This example demonstrates using abbreviated attributes to set all border width attributes in the same declaration.
<style type="text/css">
p.one{border-style: solid;border-width: 5px;}
p.two{border-style:solid;border-width:thick}
p.three{border-style:solid;border-width:5px 10px}
p.four{border-style:solid;border-width:5px 10px 1px}
p.five{border-style: solid;border-width:5px 10px 1px medium}
</style>
</head>
<body>
<p class="one"> Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p>

</body>

5.Set the color of four borders
This example demonstrates how to set the colors of four borders. You can set one or four colors.
<style type="text/css">
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 #0000ff #00ff00}
p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255)}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
</body>

6.All lower border attributes are in one declaration
This example demonstrates using abbreviated attributes to set all lower border attributes in the same declaration.
<style type="text/css">
p{border-style:solid;border-bottom:thick dotted #ff0000}

</style>
</head>
<body>
<p>This is some test</p>
</body>

7.Set the color of the lower border
This example demonstrates how to set the color of the lower border.
<style type="text/css">
p{border-style:solid;border-bottom-color:#ff0000}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>

8.Set the style of the lower border
This example demonstrates how to set the style of the lower border.
<title>Title</title>
<style type="text/css">
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>
9.Set the width of the lower border
This example demonstrates how to set the width of the lower border.
<style type="text/css">
p.one{border-style: solid;border-bottom-width:15px}
p.two{border-style:solid;border-bottom-width:thin}
</style>
</head>
<body>
<p class="one"><b>Annotation & lt; / B & gt; "border-nottom-widt" attribute will not work if used alone. First, use the "border-style" attribute to set the border & lt; / P & gt;
<p class="two">Some text.</p>
</body>

10.All left border properties are in one declaration
All left border properties are in one declaration
<style type="text/css">
p{border-style:solid;border-left:thick double #ff0000;}
</style>
</head>
<body>
<P>This is some text</P>
</body>

11.Set the color of the left border
This example demonstrates how to set the color of the left border.

<style type="text/css">
p{border-style:solid;border-left-color: #ff0000}
</style>
</head>
<body>
<p>some text.</p>
</body>

12.Set the style of the left border
This example demonstrates how to set the style of the left border.
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-left-style:none}
p.dotted {border-left-style:dotted}
p.dashed {border-left-style:dashed}
p.solid {border-left-style:solid}
p.double {border-left-style:double}
p.groove {border-left-style:groove}
p.ridge {border-left-style:ridge}
p.inset {border-left-style:inset}
p.outset {border-left-style:outset}
</style>
</head>

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

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

<style type="text/css">
p.one{border-style:solid;border-left-width:15px}
p.two{border-style:solid;border-left-width:thin}
</style>
</head>
<body>
<p class="one"><b>Note: & lt; / B & gt; "border-left-width" attribute will not work if used alone. First use the border-style property to set the border. < /p>
<p class="two">Some text. Some more text.</p>

14.All right border properties are in one declaration
This example demonstrates a shorthand property for setting all right border properties in a declaration.
<style type="text/css">
p {border-style:solid;border-right:thick double #ff0000;}
</style>
</head>
<body>
<p>This is some text </p>
</body>

15.Set the color of the right border
This example demonstrates how to set the color of the right border.

<style type="text/css">
p{border-style:solid;border-right-color:#ff0000}
</style>
</head>
<body>
<p>Some text.</p>
</body>

16.Set the Style of the Right Border
This example demonstrates how to set the style of the right border.
<style type="text/css">
p.dotted {border-right-style: dotted}
p.dashed {border-right-style: dashed}
p.solid {border-right-style: solid}
p.double {border-right-style: double}
p.groove {border-right-style: groove}
p.ridge {border-right-style: ridge}
p.inset {border-right-style: inset}
p.outset {border-right-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>

17.Set the width of the right border
This example demonstrates how to set the width of the right border.

<title>Title</title>
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>Note: & lt; / B & gt; "border-right-width" attribute will not work if used alone. First use the border-style property to set the border. < /p>
<p class="two">Some text. Some more text.</p>
18.All upper bounding properties are in one declaration
This example demonstrates using abbreviated attributes to set all upper border attributes in the same declaration.

p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>

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

19.Set the color of the upper border
This example demonstrates how to set the color of the upper border.
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>Note: & lt; / B & gt; "border-right-width" attribute will not work if used alone. First use the border-style property to set the border. < /p>
<p class="two">Some text. Some more text.</p>

20.Set the style of the upper border
This example demonstrates how to set the style of the upper border.
<style type="text/css">
p
{
border-style:solid;
}
p.none {border-top-style:none}
p.dotted {border-top-style:dotted}
p.dashed {border-top-style:dashed}
p.solid {border-top-style:solid}
p.double {border-top-style:double}
p.groove {border-top-style:groove}
p.ridge {border-top-style:ridge}
p.inset {border-top-style:inset}
p.outset {border-top-style:outset}
</style>
</head>

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

21.Set the width of the upper border
This example demonstrates how to set the width of the upper border.

<style type="text/css">
p.one
{
border-style: solid;
border-top-width: 15px
}
p.two
{
border-style: solid;
border-top-width: thin
}
</style>
</head>

<body>
<p class="one"><b>Note: & lt; / B & gt; "border-top-width" attribute will not work if used alone. First use the border-style property to set the border. < /p>
<p class="two">Some text. Some more text.</p>
</body>
Link of this Article: CSS border instance

Leave a Reply

Your email address will not be published. Required fields are marked *