Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

By: FYICenter.com

Part:   1  2  3  4   5  6  7  8  9 

(Continued from previous part...)

How To Specify Borders of a Block Element?

CSS offers 12 style properties to control borders of a block element with 3 properties on each side to control border style, width and color. You can specify those 12 border properties in different ways as shown in the following CSS examples:

  • {border-width-top: 30px} - Specifies the top border width to 30 pixels.
  • {border-width-right: 10px} - Specifies the right border width to 10 pixels.
  • {border-width-bottom: 40px} - Specifies the bottom border width to 40 pixels.
  • {border-width-left: 20px} - Specifies the left border width to 20 pixels.
  • {border-width: 30px 10px 40px 20px} - Specifies the border widths on 4 sides: top, right, bottom and left.
  • {border-style: solid dotted double dashed} - Specifies the border styles on 4 sides: top, right, bottom and left.
  • {border-color: #ff0000 #00ff00 #0000ff #000000} - Specifies the border colors on 4 sides: top, right, bottom and left.
  • {border-top: 30px solid #ff0000} - Specifies border width, style and color on the top side.
  • {border-right: 10px dotted #00ff00} - Specifies border width, style and color on the right side.
  • {border-top: 40px double #0000ff} - Specifies border width, style and color on the bottom side.
  • {border-top: 20px dashed #000000} - Specifies border width, style and color on the top side.
  • {border: 20px dashed #000000} - Specifies border width, style and color on all 4 sides with the same values.

When borders are specified, the size of the content box will be reduced to give room to meet the specified border widths on 4 sides. The size of the content box can be calculated as:

Content width = "width" - "padding-left" - "padding-right"
  - "border-left-width" - "border-right-width"
  
Content height = "height" - "padding-top" - "padding-bottom"
  - "border-top-width" - "border-bottom-width"

Hot To Test Borders with Different Widths, Styles, and Colors?

If you want test borders on all 4 sides of a <P> tag with different widths, styles and colors, you can use the following HTML and CSS document. It allows you to specify border widths with different values and validate them with legend boxes.

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 450px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#box {width: 300px; height: 300px; 
    padding: 30px 10px 40px 20px; 
    border-style: solid dotted double dashed;
    border-width: 30px 10px 40px 20px;
    border-color: #ff0000 #00ff00 #0000ff #000000;
    background-color: #ddddff}
  TD.legend#w30 {height: 30px; background-color: #ffffff}
  TD.legend#g30 {height: 30px; background-color: #dddddd}
  TD.legend#data {height: 160px; background-color: #ffffff}
  TD.legend#w40 {height: 40px; background-color: #ffffff}
  TD.legend#g40 {height: 40px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Content Box with Padding and Borders</H1>
<table id=out><tr>
<td id=box><p id=box><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=w30>- padding-top</td></tr>
<tr><td class=legend id=g30>- border-top</td></tr>
<tr><td class=legend id=data>- Content box</td></tr>
<tr><td class=legend id=g40>- padding-bottom</td></tr>
<tr><td class=legend id=w40>- border-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>

Save this document as borderBox.html, and view it with a browser you will see that the content height is reduced from 300px to 160px, because of the top border, top padding, bottom padding and bottom border:
           

(Continued on next part...)

Part:   1  2  3  4   5  6  7  8  9 


Selected Developer Jobs:

More...