Border-Width: Web Design Series: CSS Part 10


The Border-Width Property
Get the source code for this lesson at the end of the post!

Welcome back, everybody! Today, we’ll learn about the “border-width” property in CSS. We have already worked with border-style, and border-color, so this should be a simple lesson. I may have referred to this as border-size in a recent post. In case I did, just know that the correct property is border-width. It’s been a while since I’ve coded a border¬†the long way. I’m so used to shorthand coding borders; which is something that I’ll be teaching you soon. Below are some examples. We are continuing on with the border source code that we’ve been working with throughout the last two lessons.

border-width code

border-width display

In our h4 rule, I’ve changed the border-style to outset and added a border-width of 20 pixels. Now we have a very thick, blue, 3D outset border. The p rule has a border-width property with a value of 2 pixels. And Finally in our ol rule, we added a border-width of 10 pixels to our multi-colored border. These are pretty simple, self-explanatory examples. When you’re using a 3D border-style, the color and width will affect the final product, so you may need to test out some different values to get the design you’re looking for.

Some other values that can be used for the border-width property are:

  1. thin
  2. medium
  3. thick
  4. length
  5. initial
  6. inherit

I personally prefer to set the width in pixels, but you can test out the different values to see the effect. Just like the border-style and border-color properties, border-width can have up to four values. In the next example, I have added two values to our p rule border-width property and have targeted all four sides of the border surrounding our ordered list using a few types of values. Remember, no comma’s in between the values when you have more than one; just a space to separate them.

border-width multiple values code

mult. values border display

The amount of properties that you add affects the individual sides in the exact same way as the border-style and border-color properties. That’s is for this lesson; play around with all three of border properties that you’ve learned so far. In the next post, we will learn how to add rounded corners to our borders with the border-radius property. I’ll see ya next time.

posted by Clear Coded Programming

Source Code

<!DOCTYPE html>
<title>The Border Property</title>
border-style: outset;
border-color: blue;
border-width: 20px;
border-style: dashed;
border-color: #FF0000;
border-width: 8px 2px;
border-style: double dashed;
border-color: blue red green yellow;
border-width: thin medium thick 10px;
<p>This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.</p>


Please Leave a comment

%d bloggers like this: