Post
Ask Question

CSS Border Property in HTML: Part I

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;

border-in-HTML.png

CSS border-bottom Property

border-style:solid;

border-bottom:thick dotted #ff0000;

border-bottom-in-HTML.png

CSS border-bottom-color Property

border-style:solid;

border-bottom-color:#ff0000;

border-bottom-color-in-HTML.png

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>

border-bottom-width.png

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>

border-collapse-in-HTML.png

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>

border-color-in-HTML.png

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> 

border-left-in-HTML.png

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

  • border-left-color-- Property:

    border-left-color:orange;

     border-left-color-in-HTML.png

  • 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-style-in-HTML.png

  • border-left-width Property:

    border-left-width:15px;
    border-left-width-in-HTML.png

Summary

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


Similar Articles