How to add 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.

Here is the HTML code:

<html>
    <head>
        <title>Borders</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <h1>This is a heading</h1>
        <h2>This is smaller heading</h2>
        <p>And this is a paragraph</p>

        <img src="image.png" width="30%"/>
    </body>
</html>

And here is the CSS code (theme.css file):

body{
    font-family: Arial;
}

h1{
    background-color: orange;
    padding: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

h2{
    background-color: yellow;
    padding: 20px;
    border: 3px dashed blue;
}

p{
    background-color: lightblue;
    padding: 20px;
    border-top: 3px dotted red;
    border-left: 3px dashed yellow;
    border-right: 3px solid green;
    border-bottom: 3px groove black;
}

img{
    border: 3px solid grey;
}