in

CSS BORDER | Learn How To Design the Border of Web Pages With CSS

In this tutorial we will be discussing about CSS Border and how you can design the borders of web pages using CSS. In our previous tutorial we discussed about CSS tables and we learnt how to style tables using CSS. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS TABLES | Learn How to Structure Tables on Web Pages Using CSS

CSS BORDER

CSS allows developers to add different styling properties to borders on web pages. Some of this styling properties include:

  • The border color : This allows us to style the border using different colors
  • The border width: This allows us to set the width of the border
  • The border style: This allows us to style the border as either solid, dashed, inset, outset, none, hidden etc.

We will be looking at each of these properties individually and also highlight more actions we can take using these properties.

The border-color

We can style the color of the border using the border-color property. This property allows us to add different colors using color names, hex codes or rgb codes. We can set the colors for each part of the borders such as the top, bottom, left, right. The properties needed for this include:

  • The border-top-color : used to set the color of the border top
  • The border-bottom-color : used to set the color of the border bottom
  • The border-right-color : used to set the color of the border right
  • The border-left-color : used to set the color of the border left

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .colors{
         border-width: 2px;
         border-style: solid;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }

   
   </style>
  
   <title>Illustration of border colors</title>
</head>
<body>
   
   <p class="colors">
      This is a paragraph in a colored border
   </p>
   
</body>
</html>

Result

Illustration of border colors

This is a paragraph in a colored border

The border width property

The border-width property allows us to specify the width of any border. We can also specify the width of different parts of the border such as:

  • The border-top-width: This is used to set the width of the border top
  • The border-bottom-width : This is used to set the width of the border bottom
  • The border-right-width : This is used to set the width of the border right
  • The border-left-width : This is used to set the width of the border left

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .borders{
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-style: solid;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }
   </style>
  
   <title>Illustration of border-width property</title>
</head>
<body>
   
   <p class="borders">
      This is a paragraph in a colored border
   </p>
   
</body>
</html>

Result

Illustration of border-width property

This is a paragraph in a colored border

The border-style property

The border style property allows us to add different styles to the border. Some of these styles include:

  • solid– used to set the border line as solid
  • none – use to remove border from web pages
  • dotted – used to set the border lines as dotted
  • dashed – used to set the border lines as dashed lines
  • double – used to set the border lines as double
  • groove – border lines looks like it was carved into the web page
  • ridge – this is the opposite of the groove border line
  • inset – this makes the border line looks like it was embedded into the page
  • outset – This makes the border line look like it was coming out of the canvas
  • hidden– This hides the border lines

Please note that we can also set this properties to work on different parts of the borders such as the left, right, top and bottom using the properties below:

  • The border-bottom-style
  • The border-top-style
  • The border-right-style
  • The border-left-style

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .borders{
         border-style: solid;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }
      .borders1{
         border-style: dotted;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }
      .borders2{
         border-style: double;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }

      .borders3{
         border-style: groove;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }

      .borders4{
         border-style: inset;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }
      .borders5{
         border-style: outset;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }

      .borders6{
         border-style: ridge;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }

      .borders7{
         border-style: none;
         border-top-width: 2px;
         border-bottom-width: 4px;
         border-right-width: 6px;
         border-left-width: 8px;
         border-top-color: red;
         border-bottom-color: seagreen;
         border-right-color: sienna;
         border-left-color: skyblue;
      }
   </style>
  
   <title>Illustration of border-style property</title>
</head>
<body>
   
   <p class="borders">
      This is a paragraph in a solid border
   </p>
<br>
   <p class="borders1">
      This is a paragraph in a dotted border
   </p>
<br>
   <p class="borders2">
      This is a paragraph in a double border
   </p>
<br>
   <p class="borders3">
      This is a paragraph in a groove border
   </p>
<br>
   <p class="borders4">
      This is a paragraph in a inset border
   </p>
<br>
   <p class="borders5">
      This is a paragraph in a outset border
   </p>
<br>
   <p class="borders6">
      This is a paragraph in a ridge border
   </p>
<br>
   <p class="borders7">
      This is a paragraph with a none border
   </p>
   
</body>
</html>

Result

Illustration of border-style property

This is a paragraph in a solid border


This is a paragraph in a dotted border


This is a paragraph in a double border


This is a paragraph in a groove border


This is a paragraph in a inset border


This is a paragraph in a outset border


This is a paragraph in a ridge border


This is a paragraph with a none border

The border property

The CSS border property allows us to add three different property values into it. We can set the border color, style and width using this property. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .borders{
         border: red solid 2px;
      }
     
   </style>
  
   <title>Illustration of border property</title>
</head>
<body>
   
   <p class="borders">
      This is a paragraph in a solid red border with 2px width
   </p>
</body>
</html>

Result

Illustration of border property

This is a paragraph in a solid red border with 2px width

conclusion

The CSS border properties listed above are needed when styling your border for a web document. A good understanding of this properties will enable you make good web page border formatting and structure. Lets move on to the next topic on CSS MARGIN

What do you think?

css tables

CSS TABLES | Learn How to Structure Tables on Web Pages Using CSS

css margin

CSS MARGIN | Learn How to Design The Web Page Margin Using CSS