CSS Border Property in HTML: Part I

Sonia Bhadouria Vishvkarma

3y23.5k10100Article

dashed in HTMLgroove in HTMLhidden in HTMLinset in HTMLoutset in HTMLridge in HTML

10 Comments

Join the conversation! Your thoughts help the community grow.

Sandeep Singh Shekhawat14y ago
Thanks to explain border-collapse property. I really need it. I have spent 3-4 hr for it but did not get a way. Thanks to share this.
Sonia Bhadouria Vishvkarma14y ago
Thank's Kamal....
Kamal Rawat14y ago
Nice article to get start with CSS and its properties and methods
Sonia Bhadouria Vishvkarma14y ago
Thank's Vineet....
Rohatash Kumar14y ago
Vineet. You can see also Java Script,css category for more article on css. http://www.c-sharpcorner.com/1/233/javascript-css.aspx
Vineet Kumar Saini14y ago
Very Useful article. I want you will post more article of CSS in details.
Sonia Bhadouria Vishvkarma14y ago
Thank's Sir....
Rohatash Kumar14y ago
Good article. Sonia keep it up...
Sonia Bhadouria Vishvkarma14y ago
Thank's...Deepak.
Deepak Middha14y ago
Nice article Sonia.

Introduction

The border shorthand property sets all the border properties in one declaration ie; border-width, border-style, and border-color.

CSS border Property

border:5px solid red;

CSS border-bottom Property

border-style:solid;

border-bottom:thick dotted #ff0000;

CSS border-bottom-color Property

border-style:solid;

border-bottom-color:#ff0000;

CSS border-bottom-style Property

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: solid; border-bottom-style: none;}
p.dotted {border-style: solid; border-bottom-style: dotted;}
p.dashed {border-style: solid; border-bottom-style: dashed;}
p.solid {border-style: solid; border-bottom-style: solid;}
p.double {border-style: solid; border-bottom-style: double;}
p.groove {border-style: solid; border-bottom-style: groove;}
p.ridge {border-style: solid; border-bottom-style: ridge;}
p.inset {border-style: solid; border-bottom-style: inset;}
p.outset {border-style: solid; border-bottom-style: outset;}
p.hidden {border-style: solid; border-bottom-style: hidden;}
p.mix {border-style: solid; border-bottom-style: dotted dashed solid double;}
</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>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

CSS Border Style

CSS border-bottom-width Property

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-bottom-width:15px;
}
</style>
</head>
<body>
<p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

CSS border-collapse Property

<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results
in IE8 and earlier versions.</p>
</body>
</html>

CSS border-color Property

<!DOCTYPE html>
<html>
<head>
<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 #fa00ff;
  }
</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>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

CSS border-left Property

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-left:thick double #ff0000;
}
</style>
</head>
 
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Here, the border-left Property contains some more properties as shown below:

border-left-color-- Property:

border-left-color:orange;

border-left-style Property :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-left-width: 5px; /* Adding a border width to make it visible */
  padding-left: 10px; /* Adding some padding for better visibility */
}

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>

</html>

border-left-width Property:

border-left-width:15px;

Summary

Using this article we are able to give a nice look & feel to our Web-Page.