CSS

How To Add A Border With CSS

It’s not often that Aria comes and joins me on the sofa, so when I see her sitting on the sofa I think it’s nice to go and sit with her. Well, I think it’s nice. She doesn’t necessarily agree.

You’re a bit too close.

What?

You sit on me when I'm asleep!

And you have almost half the sofa.

You’re only little.

Almost half isn’t half is it?

Look, there’s a line down the middle.

Let’s agree that that marks the edge of my area.

Fine. That’s the border of your space.

Why did you say border and not edge?

Is this a CSS thing?

Aria’s right, this is a CSS thing. In CSS you can add borders around your elements which helps to define where they start and where they stop. You can use more CSS to style your borders so they enhance the look of your website.

There are several elements to styling a border, so let’s break it down one-by-one.

Border Style

Firstly you need to decide on what pattern your border will use. Borders can have different patterns just like the fur on different cats has its own pattern. There are quite a few but let’s look at a few common ones.

Solid looking border there.

This border is just dashing.

Dot Dot Dot The suspense is killing me.

The invisible border.

To set the pattern used around your element, use the border-style property.

        border-style: 
      

For the examples we saw earlier you might use:

        border-style: solid;
        border-style: dashed;
        border-style: dotted;
        border-style: hidden;
      

Here are others you could use:

  • Double

  • Groove

  • Ridge

  • Inset

  • Outset

  • None

Use the box below to add a border to this image. Try out some of the examples from the list.

        border-style:
      

The border looks good.

There could be more of it though.

Border Width

A thin border won’t always look right. Thankfully with the border-width property you can set the thickness of your border.

If it sets the thickness, why is the CSS property called border-width?

Good question.

It’s a useful reminder that the thickness of your border is part of the overall width of your HTML element.

Let’s talk through an example.

To use the border-width property, simply name the property and set the width of each edge in pixels using ‘px’ as shorthand for pixels. Here is an example for a border 3 pixels thick.

        border-width: 3px;
      

1 pixel, 2 pixel, 3 pixel more.

If this paragraph element were originally 100px wide, with its border it will still be 100px wide but the space inside the border will be reduced. On each edge a 3px border has been added and so in total the usable width has decreased by 6px.

Use the box below to change the border of this picture. What do you notice about its position as the border-width increases?

Use the box below to add a border to this image. Try out some of the examples from the list.

        border-width:
      

Thinner borders will use only 1 or 2 pixels whereas thicker borders tend to have 5 or more pixels.

Border Colour

The third, and probably most exciting part, is the border-color property which, as you might have guessed, sets the colour of your border. The border-style is much like the pattern on a cat’s fur and the border-color is like the colour of this pattern.

Click here for a reminder on how to set colours in CSS.

Here are a couple of examples:

Solid looking border there.

This border is just dashing.

Dot Dot Dot The suspense is killing me.

Now that we have looked at all three parts, use the boxes below to perfect your border around the image.

        CSS
        #example-img-border {
        	margin-left: 30%;
        	width: 40%;
        	height: auto;
        	border-style:
        	border-width:
        	border-color:
        }
      

Border Shorthand

I know you are pretty lazy and probably aren’t impressed with having to add three lines of CSS to add a border to an element.

I’m not lazy.

You’ve been laying down through this whole lesson.

Well, I’m conserving energy.

For what?

I’m going to get up and sleep in the garden in a bit.

Need some energy to drag myself through the cat flap.

Using the border property in CSS, you can roll these three CSS properties into one statement.

        border: 
      

To do this, you need to first define the thickness of your border, then the pattern, then the colour and then remember to finish with a ; symbol, just like any other CSS statement.

Here is an example of CSS which sets a solid, red border which is 2px thick.

       border: 2px solid red;
     

Individual Edges

So far each example has applied a border all the way around our elements but there is a way you can set style individual edges of your element. There are separate CSS properties for each edge and so the border property is actually a shortcut which lets you apply the same styling to every edge.

To style an individual edge, you need to specify which edge in the CSS property.

       border-top: 
       border-right: 
       border-bottom: 
       border-left: 
     

Why would I want to do this?

Wouldn’t it look odd if every edge was different?

Yes it probably would.

But you could use this to only add a styled border to one edge.

Look at this example CSS.

       .underline {
       	border-bottom: 2px solid black;
       }
     

Here is a simple CSS class you can use to underline an element. In this example, only CSS for the bottom border has been defined so the other edges will have no border. You could apply this to a heading element to draw more attention to it.

Can I give this a go?

Of course!

       CSS
       .underline {
       	border-bottom: 2px solid black;
       }
       HTML
       <h3 class="underline">Time for my outdoor nap now</h3>
     

Time for my outdoor nap now.

Looks great!

Oh.

Bye then.

She's already gone.