Lesson 25: The Borders of a Box

	The Borders of a Box

Fundamentals of Borders

Introduction

A box or an HTML element has borders all around, on the left, the top, the right, and the bottom sides. The borders of a box or element are aesthetically customizable to make your webpage very appealing.

The Styles of the Borders

A box borders are primarily marked by the way they are drawn. In geometry, we learn to draw a rectangle with a solid line. This is also the default case for boxes. This aspect is supportted through a style named border-style. It can have one of the following values:

none: The borders will not be drawn, regardless of the other characteristics of the element
hidden: The borders should not be drawn, unless there is conflict with collapsing borders

solid: This is the3 most common way to draw a border, an uninterrupted line. Here is an example:

<html>
<head>
<title>Chemistry: Carbon</title>

<style>

#introduction {
    border-style: Solid;
}

#whole {
    font-family: Times New Roman, Garamond, Georgia, serif;
    font-size:   12pt;
    background-color:  Teal;
    color:       Wheat;
}
</style>

</head>
<body id="whole">

<h1>Chemistry: Carbon</h1>

<section id="introduction">
  <p>Carbon is one of the most commonly found chemical components on earth. It 
  can be found inside the earth, on the human body, and in many organic 
  compounds. Carbon is the 6th most abundant chemical element on earth.</p>
</section>

<p>The order of abundance is:</p>

<ol>
  <li>Hydrogen
  <li>Helium
  <li>Oxygen
  <li>Neon
  <li>Nitrogen
</ol>
</body>
</html>

This would produce:

The Style of a Border - Solid

dotted: The box or element will be surrounded by tiny circles. Here is an example:

<html>
<head>
<title>Geometry: Polygons</title>

<style>
#triangle {
    border-style: dotted;
    color:        Moccasin;
    background-color:   Indigo; }

#others {
    border-style: solid;
    color:        Maroon;   
    background-color:   MediumSpringGreen; }
</style>
</head>
<body>

<div>
  <h3>Geometry: Polygons</h3>
</div>

<div>
  <p>A polygon is a geometric plane figure made of straight lines 
  also called segments. Polygons are categorized based on their number 
  of sides. Examples of categories of polygons are:</p>

  <ul>
    <li id="triangle">Triangle: A geometric figure made of <span>three</span> 
    sides (called edges) and three angles (called vertices). Triangles are 
    categorized by the relationships among the edges:
      <ul>
        <li>Equalateral: All sides have the same length
        <li>Isosceles: Two of the sides have the same length
        <li>Scalene: All sides have different lengths
      </ul>
    </li>
    <li>Quadrilateral: A geometric figure made of <span>four</span> sides 
    (called edges) and four angles (called corners). Quadrilaterals are 
    categorized by the relationships among the sides, namely whether the 
    opposite sides are equal, whether the opposite sides are parallel or 
    not, etc</li>
    <li id="others">Others: This is for polygons made of five or more sides. 
    Examples are:

      <div>
        <ul>
          <li>Pentagon: Made of 5 sides
          <li>Hexagon: Made of 6 sides
          <li>Octagon: Made of 8 sides
          <li>Decagon: Made of 10 sides
          <li>Dodegagon: Made of 12 sides
        </ul>
      </div>

    </li>
  </ul>
</div>

</body>
</html>

This would produce:

The Style of a Border - Dotted

dashed: The borders will be drawn as a solid line but with a regular interruption. Here is an example:

<html>
<head>
<title>Chemistry: Carbon</title>

<style>

#introduction {
    border-style: Solid;
}

#whole {
    font-family: Times New Roman, Garamond, Georgia, serif;
    font-size: 12pt;
    background-color: Teal;
    color:      Wheat;
}
#bottom-part   {
    border-style: dashed;
    position:    fixed;
    top:         auto;
    left:        0;
    width:       100%;
    right:       0;
    height:      5.5em;
    bottom:      0;
    background-color:  Black; }

.references {
    color:       #FFF;
    font-weight: bold;
    text-align:  center; }

</style>

</head>
<body id="whole">

<h1>Chemistry: Carbon</h1>

<section id="introduction">
  <p>Carbon is one of the most commonly found chemical components on earth. 
  It can be found inside the earth, on the human body, and in many organic 
  compounds. Carbon is the 6th most abundant chemical element on earth.</p>
</section>

<p>The order of abundance is:</p>

<ol>
  <li>Hydrogen
  <li>Helium
  <li>Oxygen
  <li>Neon
  <li>Nitrogen
</ol>

<footer id="bottom-part">
  <p class="references">Schools | Majors | Minors</p>
  <p class="references">Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

The Style of a Border - Dashed

double: The box or element will be surrounded by two solid lines. Here is an example:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
#body {
    color:      Aqua;
    background-color: Black }

.fsharp-code {
    border-style: double;
    background-color:  Navy;
    font-size:   12pt;
    color:       lightblue;
}
</style>
</head>
<body id="body">

<h1>F#: Object-Oriented Programming</h1>

<p>The F# language supports different types and, subsequenly, there are 
various means to get an object. The types in F# include records, structures, 
classes, and discriminated unions.</p>

<p>As done in <span style="font-family: Verdana; color: Yellow;">Object 
Pascal</span>, the record is the simplest technique to create a class. 
Here is an example of a record:</p>

<pre class="fsharp-code">
type Employee = {
      EmployeeNumber : string
      FirstName      : string
      LastName       : string
      HourlySalary   : float }
</pre>

</body>
</html>

This would produce:

The Style of a Border - Double

groove: The borders will have a 3-D appearance
ridge: The borders will have a 3-D appearance
inset: The borders will have a 3-D appearance
outset: The borders will have a 3-D appearance

As an option, you can draw the same type of line on two opposing sides and a different type of line on the other two opposing sides. To use this option, write two border-style values separated by an empty space. The first value will draw its type of line on the top and the bottom borders of the element while the second value will draw its type of line on the left and right borders of the element. Here is an example:

<html>
<head>
<title>Chemistry: Periodic Table</title>

<style>
#intro {
    border-style: dotted;
    background-color:   YellowGreen; }
.MainTitle {
    font-family: Georgia, Garamond, Times New Roman, serif;
    color:       red;
    font-size:   24pt; }

.presentation {
    font-family: Times New Roman, serif;
    color:       black;
    font-size:   14px; }
#elements {
    border-style: solid dotted;
    background-color:   Salmon; }
</style>

<head>
<body>

<p class="MainTitle">Chemistry: Periodic Table</p>

<section id="intro">
<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties.</p>
</section>

<p>Based on the atomic numbers, the first 8 elements are:</p>

<section id="elements">
  <ul>
    <li class="popular">Hydrogen</li>
    <li>Helium</li>
    <li>Lithium</li>
    <li>Beryllium</li>
    <li>Boron</li>
    <li class="popular">Carbon</li>
    <li>Nitrogen</li>
    <li class="popular">Oxygen</li>
  </ul>
</section>

</body>
</html>

This would produce:

The Style of a Border

You can use three values to draw borders differently. In this case, the first value represents the top side. The second value represents the left and the right sides. The last value represents the bottom border. Here is an example:

<html>
<head>
<title>Chemistry: Periodic Table</title>

<style>
#intro {
    border-style: dotted;
    background-color:   YellowGreen; }
.MainTitle {
    border-style: dotted dashed solid;
    font-family: Georgia, Garamond, Times New Roman, serif;
    color:       red;
    font-size:   24pt; }

.presentation {
    font-family: Times New Roman, serif;
    color:       black;
    font-size:   14px; }
#elements {
    border-style: dotted solid;
    background-color:   Salmon; }
</style>

<head>
<body>

<p class="MainTitle">Chemistry: Periodic Table</p>

<p>Introduction</p>

<section id="intro">
<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties.</p>
</section>

<p>Based on the atomic numbers, the first 8 elements are:</p>

<section id="elements">
  <ul>
    <li class="popular">Hydrogen</li>
    <li>Helium</li>
    <li>Lithium</li>
    <li>Beryllium</li>
    <li>Boron</li>
    <li class="popular">Carbon</li>
    <li>Nitrogen</li>
    <li class="popular">Oxygen</li>
  </ul>
</section>

</body>
</html>

This would produce:

The Style of a Border

In the same way, you can use this feature to draw a line on one of the borders. To do this, set the first two values as hidden and the last value for the type of line you want. Here is an example:

<html>
<head>
<title>Chemistry: Periodic Table</title>

<style>
.bottom-line { border-style: hidden hidden solid; }
#intro {
    border-style: dotted;
    background-color:   YellowGreen; }
.MainTitle {
    border-style: hidden hidden solid;
    font-family: Georgia, Garamond, Times New Roman, serif;
    color:       red;
    font-size:   24pt; }

.presentation {
    font-family: Times New Roman, serif;
    color:       black;
    font-size:   14px; }
#elements {
    background-color: Salmon;
    border-style:     solid dotted; }
</style>

<head>
<body>

<div>
  <p class="MainTitle">Chemistry: Periodic Table</p>
</div>

<p>Introduction</p>

<section id="intro">
<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties.</p>
</section>

<p>Based on the atomic numbers, the first 8 elements are:</p>

<section id="elements">
  <ul>
    <li class="popular">Hydrogen</li>
    <li>Helium</li>
    <li>Lithium</li>
    <li>Beryllium</li>
    <li>Boron</li>
    <li class="popular">Carbon</li>
    <li>Nitrogen</li>
    <li class="popular">Oxygen</li>
  </ul>
</section>

</body>
</html>

This would produce:

The Style of a Border

The Colors of the Borders

The sides of a box can be marked with a color. To support the color of the borders, CSS provides the border-color style. As its name indicates, this style takes a color as its value. Here is an example:

<html>
<head>
<title>Geometry: Polygons</title>

<style>
#buddy
{
    color:        Yellow;
    text-align:   justify;
    background-color:   SaddleBrown;
}
#triangle
{
    border-color: PaleGreen;
    border-style: solid hidden;
    color:        Moccasin;
    background-color:   IndianRed;
}
#others
{
    border-color: MidnightBlue;
    border-style: solid hidden;
    color:        Maroon;   
    background-color:   MediumSpringGreen;
}
</style>
<head>
<body id="buddy">

<div>
  <h3>Geometry: Polygons</h3>
</div>

<div>
  <p>A polygon is a geometric plane figure made of straight lines 
  also called segments. Polygons are categorized based on their number 
  of sides. Examples of categories of polygons are:</p>

  <ul>
    <li id="triangle">Triangle: A geometric figure made of <span>three</span> 
    sides (called edges) and three angles (called vertices). Triangles are 
    categorized by the relationships among the edges:
      <ul>
        <li>Equalateral: All sides have the same length
        <li>Isosceles: Two of the sides have the same length
        <li>Scalene: All sides have different lengths
      </ul>
    </li>
    <li>Quadrilateral: A geometric figure made of <span>four</span> sides 
    (called edges) and four angles (called corners). Quadrilaterals are 
    categorized by the relationships among the sides, namely whether the 
    opposite sides are equal, whether the opposite sides are parallel or 
    not, etc</li>
    <li id="others">Others: This is for polygons made of five or more sides. 
    Examples are:

      <div>
        <ul>
          <li>Pentagon: Made of 5 sides
          <li>Hexagon: Made of 6 sides
          <li>Octagon: Made of 8 sides
          <li>Decagon: Made of 10 sides
          <li>Dodegagon: Made of 12 sides
        </ul>
      </div>

    </li>
  </ul>
</div>

</body>
</html>

This would produce:

The Style of a Border

The Thickness of the Borders

The thickness of a border is the initensity by which the border is drawn. The thickness can be expressed as:

A Quantity: The quantity is set using one of the following self-explanatory words: medium, thin, or thick. Here are examples:

<html>
<head>
<title>Geometry: Polygons</title>

<style>
#triangle
{
    border-width: thin;
    border-color: Cyan;
    border-style: solid hidden;
    color:        Moccasin;
    background-color:   IndianRed;
}
#others
{
    border-width: medium;
    border-color: SpringGreen;
    border-style: solid hidden;
    color:        Wheat;   
    background-color:   Sienna;
}
#foot
{
    border-width: thick;
    border-color: OldLace;
    border-style: solid hidden;
    position: absolute;
    left:         0;
    right:        0;
    bottom:       0;
    width:        100%;
    background-color:   #400;
    height:       3.28em;
}

.copyright
{
    text-align:   center;
    color:        Moccasin;
}
#buddy
{
    color:        Yellow;
    text-align:   justify;
    background-color:   SaddleBrown;
}
</style>
<head>
<body id="buddy">

<div>
  <h3>Geometry: Polygons</h3>
</div>

<div>
  <p>A polygon is a geometric plane figure made of straight lines 
  also called segments. Polygons are categorized based on their number 
  of sides. Examples of categories of polygons are:</p>

  <ul>
    <li id="triangle">Triangle: A geometric figure made of <span>three</span> 
    sides (called edges) and three angles (called vertices). Triangles are 
    categorized by the relationships among the edges.
    </li>
    <li>Quadrilateral: A geometric figure made of <span>four</span> sides 
    (called edges) and four angles (called corners). Quadrilaterals are 
    categorized by the relationships among the sides, namely whether the 
    opposite sides are equal, whether the opposite sides are parallel or 
    not, etc</li>
    <li id="others">Others: This is for polygons made of five or more sides. 
    Examples are:

      <div>
        <ul>
          <li>Pentagon: Made of 5 sides
          <li>Hexagon: Made of 6 sides
          <li>Octagon: Made of 8 sides
        </ul>
      </div>

    </li>
  </ul>
</div>

<footer id="foot">
  <p class="copyright">Copyright, &copy; 2015</p>
</footer>
</body>
</html>

This would produce:

The Width of a Border

A Decimal Value: In this case, the border thickness must be set as an HTML-based number. Here are examples:

<html>
<head>

<title>Social Science Studies</title>

<style>
#main-title {
    border-width: 2px;
    border-style: solid;
    border-color: Navy;
    font-weight:  bold;
    height:       1.38em;
    color:        #F00;
    font-size:    2.24em;
    text-align:   center;
    background-color:   Bisque;
    text-shadow:  0.10cm 0.10cm 0.02cm Black;
    font-family:  Bodoni MT Black, Georgia, Times New Roman, serif;
}
#introductory {
    border-width: 0.12cm;
    border-style: solid;
    border-color: DarkGreen;
    color:        #000;
    text-align:   left;
    font-size:    1.24em;
    background-color:   PaleTurquoise;
    font-family:  Times New Roman, Garamond, Times, serif;
}
#recommendation {
    border-width: 0.45em;
    border-style: solid;
    border-color: Peru;
    color:        Yellow;
    text-align:   left;
    font-size:    1.24em;
    background-color:   Navy;
    font-family:  Times New Roman, Garamond, Times, serif;
}

</style>

</head>
<body>

<p id="main-title">Social Science Studies</p>

<section id="introductory">
  <p>Social sciences cover a wide range of studies that address all 
  types of topics about human beings, their behaviors, their history, their 
  societies, and their environments. Some social science topics are grouped 
  in categories, such as individual or crowd, where studies tend to address 
  the same categorical isssues.</p>
</section>

<footer id="recommendation">
  <p>If you are planning to study any of the scocial science topics, 
  find a good school.</p>

  <p style="text-align: center">Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

The Width of a Border

The Borders of a Box or Element

Instead individually specifying the thickness, and the color, and the style of a border, CSS provides a style named border that combines all three styles. The formula to follow is:

border: width style color

Here is an example:

<html>
<head>

<title>Social Science Studies</title>

<style>
#main-title {
    border:       10px groove Navy;
    font-weight:  bold;
    height:       1.38em;
    color:        #F00;
    font-size:    2.24em;
    text-align:   center;
    background-color:   Bisque;
    text-shadow:  0.10cm 0.10cm 0.02cm Black;
    font-family:  Bodoni MT Black, Georgia, Times New Roman, serif;
}
#introductory {
    border:       0.2cm ridge DarkGreen;
    color:        #000;
    text-align:   left;
    font-size:    1.24em;
    background-color:   PaleTurquoise;
    font-family:  Times New Roman, Garamond, Times, serif;
}
#recommendation {
    border:       0.75em inset Peru;
    color:        Yellow;
    text-align:   left;
    font-size:    1.24em;
    background-color:   Navy;
    font-family:  Times New Roman, Garamond, Times, serif;
}
</style>

</head>
<body>

<p id="main-title">Social Science Studies</p>

<section id="introductory">
  <p>Social sciences cover a wide range of studies that address all 
  types of topics about human beings, their behaviors, their history, their 
  societies, and their environments. Some social science topics are grouped in 
  categories, such as individual or crowd, where studies tend to address the 
  same categorical isssues.</p>
</section>

<footer id="recommendation">
  <p>If you are planning to study any of the scocial science topics, 
  find a good school.</p>

  <p style="text-align: center">Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

The Border of a Box or Element

Borders by Sides

Introduction

As mentioned in our introduction to boxes, a box or an element has four sides: left, top, right, and bottom. Based on the three fundamental characteristics of a side, CSS allows you to manage its side individually.

Each style of a border has a specific name. It starts with border, followed by -, and followed by the designating side.

The Style of a Border

Each side has its own border element and a border style can be applied to that side. Each side has an adapted name and they are:

border-left-style
border-top-style
border-right-style
border-bottom-style

Each style follows the same rules we reviewed for the borders of a box.

The Color of a Border

All sides of a box or element can be painted with the same color or each side can have its own color. The names of the styles to apply a color to each side are:

border-left-color
border-top-color
border-right-color
border-bottom-color

The value of the style can any valid color.

The Thickness of a Border

Every side of a box can have the desired thickness for the line drawn on it. The names of the thickness styles are:

border-left-width
border-top-width
border-right-width
border-bottom-width

The thickness can be a name (medium, thin, or thick) or an HTML-based number.

The Style of a Border

Instead of accessing the individual styles of each side, CSS provides a name for each border. The border for the left side of a box or element is named border-left. The value of the style is in the form:

width style color

Here is an example of using this style:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:  12pt;
    text-align: justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
    border-left: 1pt solid  #99CCFF;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    display:         inline-block;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:      Aqua; /* #FFCC00; */
    background-color: #00254A; /* #8CC6FF*/
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:      #FFFF99;
    background-color: #004080 /*, #3399FF, #004080);*/ 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}

.philosophic
{
    display: table;
    outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
    height:      20pt;
    line-height: 20pt;
    display:     table-cell
}
.philo-field, .philo-topic, .philo-issues
{
    background-color: #333333;
    outline: 1pt solid Gray;
}
.philo-field   { width: 110pt }
.philo-topic   { width: 70pt  }
.philo-issues2 { width: 200pt }
.philo-title
{
    height:      26pt;
    line-height: 26pt;
    font-weight: bold;
    color:       white;
    font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2
{
    background-color: Silver;
    outline:          1pt solid #FFF;
}
#bottom-banner
{
    background: linear-gradient(#004080, #0066FF);
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}

#branches, #history, #resources { float: left }
#branches  a:link, #branches  a:active, #branches  a:visited, #branches  a:hover,
#history   a:link, #history   a:active, #history   a:visited, #history   a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    height:      26px;
    font-size:   12pt;
    line-height: 26px;
    text-decoration: none;
    display:  inline-block;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link,    #history a:link,    #resources a:link    { color: #FFFF00 }
#branches a:active,  #history a:active,  #resources a:active  { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover,   #history a:hover,   #resources a:hover
{
    color:            #FFCCFF;
    background-color: #0066CC;
    display:          inline-block;
    outline:          1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
  
  <p class="description">Some of the most regular fields of study in philosophy 
  are:</p>
</div>

<div class="philosophic">
  <div class="philo-heading">
    <div class="philo-field philo-title">Philosophic Field</div>
    <div class="philo-topic philo-title">Topic</div>
    <div class="philo-issues philo-title">Issues</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Epistemology</div>
    <div class="philo-value1">Knowledge</div>
    <div class="philo-value1">Truth, perception, belief, justification</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Logic</div>
    <div class="philo-value2">Reason</div>
    <div class="philo-value2">Deduction (deductive reasoning)<br>
    Induction (inductive reseaning)</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Metaphysics</div>
    <div class="philo-value1">Reality</div>
    <div class="philo-value1">Existence, time, causality</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Aesthetics</div>
    <div class="philo-value2">Beauty</div>
    <div class="philo-value2">Art, beauty, taste</div>
  </div>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>
   
  <div id="history">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities</a></p>
  </div>
   
  <div id="resources">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities/Colleges/Majors</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

The Left Border of a Box or Element

The style used to control the bottom border of a box or section is named border-bottom. It also takes values for the line type, the color, and the thickness. Here are examples of using it:

<!DOCTYPE html>

<html>
<head>
<title>Psychology</title>
<style>
background: radial-gradient(at 75%, #400, Bisque);  }
#top-portion, #bottom-portion { width: 625px }

#top-title
{
    text-align:  center;
    color:       rgb(255, 250, 250);
    border-bottom: 2pt dotted #400;
    text-shadow: 0.14cm 0.14cm 0.12cm #400;
    font:        bold 28pt Bodoni, Elephant, Times, serif;
}
.description
{
    color:      #400;
    text-align: justify;
    font:       normal 14pt Times New Roman, Garamond, Times, serif;
}
#links-bar { height: 32px }

#bottom-portion
{
    background: linear-gradient(270deg, rgb(175, 85, 10) 50%, #400 90%, rgb(175, 85, 10) 100%); }
}
#links-bar { background-color: rgb(175, 85, 10) }
#links-bar p { float: right }

a.lnk-btn:link, a.lnk-btn:active, a.lnk-btn:visited, a.lnk-btn:hover
{
    height:          32px;
    line-height:     32px;
    font-size:       14px;
    text-decoration: none;
    width:           70pt;
    text-align:      center;
    outline:         1pt solid rgb(255, 155,   0);
    font-family:     Meiryo, Segoe UI, sans-serif
}
a.lnk-btn:link
{
    background-color: #400;
    display:          inline-block;
    color:            rgb(255, 155, 0);
}
a.lnk-btn:active  { color: rgb(  0, 255, 255) }
a.lnk-btn:visited { color: rgb(102, 155, 255) }
a.lnk-btn:hover
{
    color: rgb(255, 255,   0);
    background-color: rgb(175, 85, 10);
}
#dealing, #exploration, #resources
{
    float: left;
    width: 145pt;
}
#exploration, #resources { border-left: 1pt dashed #FFFFcc; }

#bottom-portion { height: 160px }
#dealing ul, #exploration ul, #resources ul { list-style-type: none; }

#dealing a:link, #dealing a:active, #dealing a:visited, #dealing a:hover,
#exploration a:link, #exploration a:active, #exploration a:visited, #exploration a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    text-decoration: none;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
}
#dealing a:link, #exploration a:link,    #resources a:link
{
    color: #FFCC00;
}
#dealing a:active,  #exploration a:active,  #resources a:active  { color: #999966 }
#dealing a:visited, #exploration a:visited, #resources a:visited { color: #FF99FF }
#dealing a:hover,   #exploration a:hover,   #resources a:hover
{
    color:           #FFFF99;
    text-decoration: underline;
}
.psychohead
{
    display:       block;
    color:         Orange;
    font-weight:   bold;
    font-size:     14pt;
    border-left:   1pt dashed white;
    border-bottom: 1pt dashed white;
}
#bottom-portion
{
    bottom:   0;
    top:      auto;
    height:   auto;
    position: absolute;
}
.clearer { clear: right }
</style>
</head>

<body>

<div id="top-portion">
  <p id="top-title">Psychology</p>
</div>

<div id="links-banner">
  <div id="links-bar">
    <p><a class="lnk-btn" href="aboutus.htm">About Us</a></p>
    <p><a class="lnk-btn" href="library.htm">Library</a></p>
    <p><a class="lnk-btn" href="academia.htm">Academia</a></p>
    <p><a class="lnk-btn" href="socialsciences/index.htm">Home</a></p>
  </div>
</div>

<div class="clearer"></div>

<div class="container">
  <p class="description">Psychology is a social science field that focuses on 
  the mind as it relates to human thoughts and behaviors. On one hand, 
  psychology gets inputs from sociology, philosophy, medicine, and ethnicity, 
  etc. on the other hand, psychology has a great influence on all sciences 
  that deal with personal views and actions.</p>

  <p class="description">Psychology does not exclusively targets the 
  individual but it also considers any aspect in the   person's environment. 
  As a matter of facts, there are various fields of studies that derive from 
  psychology.</p>
</div>

<div id="bottom-portion">
  <div id="bottom-container">
    <div id="dealing">
      <ul>
        <li class="psychohead">Dealing With ...</li>
        <li><a href="healing.htm">Healing</a></li>
        <li><a href="leadership.htm">Leadership</a></li>
        <li><a href="addictions.htm">Addictions</a></li>
        <li><a href="self-esteem.htm">Self-Esteem</a></li>
        <li><a href="achievements.htm">Achievements</a></li>
      </ul>
     </div>

    <div id="exploration">
      <ul>
        <li class="psychohead">Exploring ...</li>
        <li><a href="psychotherapy.htm">Psychotherapy</a></li>
        <li><a href="therapy.htm">Family Therapy</a></li>
        <li><a href="communication.htm">Communication</a></li>
        <li><a href="politics.htm">Political Science</a></li>
      </ul>
     </div>

    <div id="resources">
      <ul>
        <li class="psychohead">Resources</li>
        <li><a href="education.htm">Education/Degrees</a></li>
        <li><a href="professions.htm">Professions</a></li>
        <li><a href="helplines.htm">Help Lines</a></li>
        <li><a href="online.htm">Online Resources</a></li>
      </ul>
    </div>
   </div>
</div>

</body>
</html>

The style to set the top border of a box is named border-top and it takes the same types of values as the other two styles used above. Here is an example:

#bottom-portion
{
    bottom:   0;
    top:      auto;
    height:   auto;
    position: absolute;
    border-top: 3pt solid #400;
}

Finally, the style that controls the right border of an element is border-right. Here is an example of setting it (you can put the following line anywhere between the style and the lines in the head section:

#resources { border-right: 1pt dashed #FFFFcc }

The Corners of a Box

Introduction

The corner of a box is the intersection of two adjacent borders. By default, the corner of a box is drawn as a 90° angle. CSS allows you to round a corner to a radius of your choice. You have various options to manage the top-left, the top-right, the bottom-right, and the bottom-left corners:

The Corners of a Box or Element

The Radius a Corner

A corner is created by setting the radius by which to draw an arc on the corner. The arc is drawn as a quarter of a circle. In order to draw that arc, you must indicate the corner on which you want to work. Each corner has a name that is a combination of border, followed by -, followed by a designation of the conrner, and ending with -radius. The style names are:

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

An arc is drawn by specifying a radius for its circle. The value can be set by:

A Contant Value: The value must be an HTML-based number. Here are examples:

<html>
<head>

<title>Geometry: Polygons</title>

<style>
#main-title {
    border-top-left-radius: 1.15cm;
    border:       5px groove Navy;
    font-weight:  bold;
    height:       1.38em;
    color:        #F00;
    font-size:    2.45em;
    text-align:   center;
    background-color:   Bisque;
    text-shadow:  0.10cm 0.10cm 0.02cm Black;
    font-family:  Bodoni MT Black, Georgia, Times New Roman, serif;
}
#central {
    border-top-left-radius: 1.75em;
    border-top-right-radius: 40pt;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 2in;
    border:       0.2cm ridge DarkGreen;
    background-color:   PaleTurquoise;
}
</style>

</head>
<body>

<p id="main-title">Geometry: Polygons</p>

<section id="central">
  <p>A polygon is a geometric plane figure made of straight lines 
  also called segments. Polygons are categorized based on their number 
  of sides. Examples of categories of polygons are:</p>

  <ul>
    <li>Triangle: A geometric figure made of <span>three</span> sides (called 
    edges) and three angles (called vertices). Triangles are categorized by the 
    relationships among the edges:
      <ul>
        <li>Equalateral: All sides have the same length
        <li>Isosceles: Two of the sides have the same length
        <li>Scalene: All sides have different lengths
      </ul>
    </li>
    <li>Quadrilateral: A geometric figure made of <span>four</span> sides 
    (called edges) and four angles (called corners). Quadrilaterals are 
    categorized by the relationships among the sides, namely whether the 
    opposite sides are equal, whether the opposite sides are parallel or not, 
    etc</li>
    <li>Others: This is for polygons made of five or more sides. Examples are:
      <ul>
        <li>Pentagon: Made of 5 sides
        <li>Hexagon: Made of 6 sides
        <li>Octagon: Made of 8 sides
        <li>Decagon: Made of 10 sides
        <li>Dodegagon: Made of 12 sides
      </ul>
    </li>
  </ul>
</section>

</body>
</html>

This would produce:

The Corners of a Box

A Relative Value: The value is a percentage and it will be taken as a ratio of both intersecting borders. Here is an example:

#main-title {
    border-top-left-radius: 1.15cm;
    border-bottom-right-radius: 50%;
    border:       5px groove Navy;
    font-weight:  bold;
    height:       1.38em;
    color:        #F00;
    font-size:    2.45em;
    text-align:   center;
    background-color:   Bisque;
    text-shadow:  0.10cm 0.10cm 0.02cm Black;
    font-family:  Bodoni MT Black, Georgia, Times New Roman, serif;
}

This would produce:

The Corners of a Box