June 8, 2016

border-width Property In CSS

The border-width Property

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. When just starting out in CSS; it’s common for coders to get border-width confused with border-size. Remember that in order to affect the thickness of a border you have to use the border-width property; not size like in the font-size property. 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 property

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

Most often, border-widths are set using pixels, but there may be times where you find one of the above values useful. Just like the border-style and border-color properties, border-width can have up to four values. In the next example, we add 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 it for this lesson; play around with all three of border properties that you’ve learned so far. In the next lesson, we will learn how to add rounded corners to our borders with the border-radius property. I’ll see ya next time.

Clear Coded Programming

Source Code

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

Please Leave a comment