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.
p
{
border-style:solid;
border-right:thick double #ff0000;
}
![border-right-in-HTML.png]()
- 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.
p
{
border-style:solid;
border-right-color:#ff0000;
}
![border-right-color-in-HTML.png]()
- CSS border-right-style Property
The border-right-style property sets the style of an element's right border.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
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.
p
{
border-style:solid;
border-right-width:15px;
}
![border-right-width-in-HTML.png]()
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>
<style type="text/css">
table.ex1
{
border-collapse:separate;
border-spacing:10px;
}
table.ex2
{
border-collapse:separate;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class="ex1" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="ex2" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
</body>
</html>
![border-spacing-in-HTML.png]()
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>
<style type="text/css">
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>
![border-style-in-HTML.png]()
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.
p
{
border-style:solid;
border-top:thick double #ff0000;
}
![border-top-in-HTML.png]()
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.
p
{
border-style:solid;
border-top-color:#ff0000;
}
![border-top-color-in-HTML.png]()
The border-top-style property sets the style of an element's top border.
<!DOCTYPE html>
<html>
<head>
<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>
</html>
![border-top-style-in-HTML.png]()
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.
p
{
border-style:solid;
border-top-width:15px;
}
![border-top-width-in-HTML.png]()
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>
<style type="text/css">
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">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
</body>
</html>
![border-width-in-HTML.png]()
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>
<style type="text/css">
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>
![border-bottom-left-radius-in-HTML.png]()
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;
}
![border-bottom-right-radius-in-HTML.png]()
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>
<style type="text/css">
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>
<img src=klematis.png />
</body>
</html>
![border-image-in-HTML.png]()
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;
}
![border-radius-in-HTML.png]()
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 */
}
![border-top-left-radius-in-HTML.png]()
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 */
}
![border-top-right-radius-in-HTML.png]()
Summary
This article provides us the knowledge of Border Properties.