The box model and borders

In the previous tutorial, we looked at the box model and how to add padding around elements. In this tutorial we will look at how to add borders around elements (or boxes). We can change the thickness, colour and style of borders.

Border styles include:

  • none
  • solid
  • dotted
  • dashed
  • double
  • ridge
  • groove
  • inset
  • outset

The image below shows how a heading can have its own background colour and border style. In this example, the heading has been given a grey background with a green solid border using some simple CSS code.

boxeg

Watch the video below and then scroll down to see the sample code.

Check out the sample code below to see how you can add borders to your own web page elements.

<!DOCTYPE html>
<html>
<head>
 <title>Box model and borders</title>
 <meta charset="utf-8"/>
 <style>
 h1{
 background-color:orange;
 padding:20px;
 border-style:solid;
 border-width:5px;
 border-color:green;
 }
 h2{
 background-color:yellow;
 padding:20px;
 border: 3px dashed blue;
 }
 p{
 background-color:blue;
 padding:20px;
 border-top: 8px dotted red;
 border-left: 8px dashed yellow;
 border-right: 8px solid green;
 border-bottom: 8px groove black;
 }
 </style>
</head>
 
<body>
 <h1>This is a box</h1>
 <h2>This is another box</h2>
 <p>And another box</p>
 
</body>
 
</html>