How to add borders with CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In the previous lesson, we looked at the box model and how to add padding around elements. In this lesson, 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.

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 and CSS code:

Next lesson: How to add margins