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

Q

Hot To Test Borders with Different Widths, Styles, and Colors? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

✍: FYIcenter.com

A

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:

2007-05-11, 5488👍, 0💬

How To Specify Is the Color of the Margin Area
How To Specify Is the Color of the Margin Area? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS doesn't allow you to specify the color of the margin area of a block element. The color of the margin area is transparent. It means that the background color or background... 2007-05-11, 5429👍, 0💬

What Are the Background Properties of a Block Element
What Are the Background Properties of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements The background of a block element can be formatted in different ways: Transparent to show the background of the parent element. Non-transparent background with a specif... 2007-05-11, 5250👍, 0💬

Hot To Specify the Padding Spaces of a Block Element
Hot To Specify the Padding Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 4 style properties to control padding spaces of a block element. You can specify them in different ways as shown in the following CSS examples: {padding-top: ... 2007-05-11, 5236👍, 0💬

Hot To Test Margin Spaces on All 4 Sides
Hot To Test Margin Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want test margin spaces on all 4 sides of a <P> tag you can use the following HTML and CSS document. It allows you to specify margin spaces with different values and v... 2007-05-11, 5127👍, 0💬

What Is a Floating Element
What Is a Floating Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of... 2007-05-11, 5074👍, 0💬

Hot To Specify the Content Box Size of a Block Element
Hot To Specify the Content Box Size of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want to control the size of the content box of a block element, you can use the "width" and "height" properties as shown below: {width: 300px} - Specifies the c... 2007-05-11, 4857👍, 0💬

How To Specify Margin Spaces of a Block Element
How To Specify Margin Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 4 style properties to control margin spaces of a block element. You can specify them in different ways as shown in the following CSS examples: {margin-top: 30px} -... 2007-05-11, 4851👍, 0💬

How To Specify Is the Color of the Padding Area
How To Specify Is the Color of the Padding Area? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS doesn't allow you to specify the color of the padding area of a block element. The padding area is part of the background of the block element. In another word, the paddi... 2007-05-11, 4845👍, 0💬

How To Specify Borders of a Block Element
How To Specify Borders of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements 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 proper... 2007-05-11, 4779👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.