CSS Border Property in HTML: Part 2

Article

This is the second part of my article. If you have not read the previous articles then please go through the first part of that article:

CSS Border Property in HTML: Part I

CSS border-right Property

The border-right shorthand property sets all the right border properties in one declaration.

The properties that can be set, are (in order): border-right-width, border-right-style, and border-right-color.

{

border-style:solid;

border-right:thick double #ff0000;

}

CSS border-right-color Property

The border-right-color property sets the color of an element's right border.

Note: Always declare the border-style property before the border-right-color property. An element must have borders before you can change the color.

{

border-style:solid;

border-right-color:#ff0000;

}

CSS border-right-style Property

The border-right-style property sets the style of an element's right border.

<!DOCTYPE html>

<html>

<head>

{

border-style:solid;

}

p.none {border-right-style:none;}

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="none">No right border.</p>

<p class="dotted">A dotted right border.</p>

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

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

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

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

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

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

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

</body>

</html>

CSS border-right-width Property

The border-right-width property sets the width of an element's right border.

Note: Always declare the border-style property before the border-right-width property. An element must have borders before you can change the width.

{

border-style:solid;

border-right-width:15px;

}

CSS border-spacing Property

The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).

<!DOCTYPE html>

<html>

<head>

table.ex1

{

border-collapse:separate;

border-spacing:10px;

}

table.ex2

{

border-collapse:separate;

border-spacing:10px 50px;

}

</style>

</head>

<body>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

<br />

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

<tr>

<td>Glenn</td>

<td>Quagmire</td>

</tr>

</table>

</body>

</html>

CSS border-style Property

The border-style property sets the style of an element's four borders. This property can have from one to four values.

Examples:

border-style:dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
border-style:dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
border-style:dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
border-style:dotted;
- all four borders are dotted
none : Specifies no border
hidden : The same as "none", except in border conflict resolution for table elements
dotted : Specifies a dotted border
dashed : Specifies a dashed border
solid : Specifies a solid border
double : Specifies a double border
groove : Specifies a 3D grooved border. The effect depends on the border-color value
ridge : Specifies a 3D ridged border. The effect depends on the border-color value
inset : Specifies a 3D inset border. The effect depends on the border-color value
outset : Specifies a 3D outset border. The effect depends on the border-color value
inherit : Specifies that the border style should be inherited from the parent element

<!DOCTYPE html>

<html>

<head>

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">No border.</p>

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

<p class="hidden">A hidden border.</p>

</body>

</html>

CSS border-top Property

The border-top shorthand property sets all the top border properties in one declaration.

The properties that can be set, are (in order): border-top-width, border-top-style, and border-top-color.

{

border-style:solid;

border-top:thick double #ff0000;

}

CSS border-top-color Property

The border-top-color property sets the color of an element's top border.

Note: Always declare the border-style property before the border-top-color property. An element must have borders before you can change the color.

{

border-style:solid;

border-top-color:#ff0000;

}

CSS border-top-style Property

The border-top-style property sets the style of an element's top border.

<!DOCTYPE html>

<html>

<head>

{

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>

</html>

CSS border-top-width Property

The border-top-width property sets the width of an element's top border.

Note: Always declare the border-style property before the border-top-width property. An element must have borders before you can change the width.

{

border-style:solid;

border-top-width:15px;

}

CSS border-width Property

The border-width property sets the width of an element's four borders. This property can have from one to four values.

Examples:

border-width:thin medium thick 10px;
- top border is thin
- right border is medium
- bottom border is thick
- left border is 10px
border-width:thin medium thick;
- top border is thin
- right and left borders are medium
- bottom border is thick
border-width:thin medium;
- top and bottom borders are thin
- right and left borders are medium
border-width:thin;
- all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders before you can change the color.

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

CSS border-bottom-left-radius Property

The border-bottom-left-radius property defines the shape of the border of the bottom-left corner.

Tip: This property allows you to add rounded borders to elements!

Syntax : border-bottom-left-radius: length|% [length|%];

Note: The two length or percentage values of the border-bottom-left-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.

The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded.

Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.

<!DOCTYPE html>

<html>

<head>

div

{

border:2px solid;

padding:10px;

background:#dddddd;

border-bottom-left-radius:2em;

}

</style>

</head>

<body>

<div>The border-bottom-left-radius property allows you to add a rounded border to the bottom-left corner.</div>

</body>

</html>

CSS border-bottom-right-radius Property

The border-bottom-right-radius property defines the shape of the border of the bottom-right corner.

Tip: This property allows you to add rounded borders to elements!

Syntax : border-bottom-right-radius: length|% [length|%];

div

{

border:2px solid;

padding:10px;

background:#dddddd;

border-bottom-right-radius:2em;

}

CSS border-image Property

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Omitted values are set to their default values.

Tip: Use the border-image-* properties to construct beautiful scalable buttons!

<!DOCTYPE html>

<html>

<head>

div

{

border-width:15px;

width:250px;

padding:10px 20px;

}

#round

{

-moz-border-image:url("border.png") 30 30 round; /* Firefox */

-webkit-border-image:url("border.png") 30 30 round; /* Safari */

-o-border-image:url("border.png") 30 30 round; /* Opera */

border-image:url("border.png") 30 30 round;

}

#stretch

{

-moz-border-image:url("border.png") 30 30 stretch; /* Firefox */

-webkit-border-image:url("border.png") 30 30 stretch; /* Safari */

-o-border-image:url("border.png") 30 30 stretch; /* Opera */

border-image:url("border.png") 30 30 stretch;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>

<p>The border-image property specifies an image to be used as a border.</p>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>

<br />

<div id="stretch">Here, the image is stretched to fill the area.</div>

<p>Here is the image used:</p>

</body>

</html>

CSS border-radius Property

The border-radius property is a shorthand property for setting the four border-*-radius properties.

Tip: This property allows you to add rounded borders to elements!

Syntax : border-radius: 1-4 length|% / 1-4 length|%;

div

{

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:300px;

border-radius:25px;

}

CSS border-top-left-radius Property

The border-top-left-radius property defines the shape of the border of the top-left corner.

Tip: This property allows you to add rounded borders to elements!

Syntax : border-top-left-radius: length|% [length|%];

div

{

border:2px solid;

padding:10px;

background:#dddddd;

border-top-left-radius:2em;

-webkit-border-top-left-radius:2em; /* Safari */

}

CSS border-top-right-radius Property

The border-top-right-radius property defines the shape of the border of the top-right corner.

Tip: This property allows you to add rounded borders to elements!

Syntax : border-top-right-radius: length|% [length|%];

div

{

border:2px solid;

padding:10px;

background:#dddddd;

border-top-right-radius:2em;

-webkit-border-top-right-radius:2em; /* Safari */

}

Summary