CSS Borders

You already might know what strokes mean in designs, right? Well if you don't then strokes are simply bounding lines, serving to create a boundary for something.

CSS gives designers the ability to apply strokes to HTML elements using two very simple ways: borders and outlines.

For this chapter we specifically look into CSS borders, so let's begin exploring these bounding lines.

In CSS, borders are bounding lines of an element that affect its width.

Now there is absolutely no rocket science involved in understanding this definition - borders actually affect a page's layout and are the exact opposite of CSS outlines as we will see in the next chapter.

The next question is how to give borders in CSS, and this is what we see next.

Starting with the most often and most basic case - let's see how to apply a border to all the sides of an HTML element.

It is very simple using the border property:

<p>A paragraph</p>

p {
    border: 1px solid black
}

Now let's break down the value of border into seperate parts:

1. The first parameter defines the width of the border. It can be in px or any other CSS unit.
2. The second parameter is the type of the border: solid denotes a solid border with no gaps, dashed denotes a dashed border with spaces in between and so on.
3. The third and the last parameter defines the color of the border, which if unspecified defaults to black. And you know colors from the CSS Colors Unit already right?

Let's even see this code working in real.

As you can see we have a 1px solid border with color black. Even if we don't define the third parameter the color would still be black. Try removing the color parameter and see what you get.

Playing around with the parameters we get the following examples:

p {
    border: 5px solid blue;
}

A dashed orange border.

p {
    border: 2px dashed orange;
}

A 3px dotted green border.

p {
    border: 3px dotted green;
}

A 1em double gold border.

p {
    border: 1em double gold;
}

And the list goes on... Ideally head over to developer tools right now and start experimenting with CSS borders!

Uptil now we have seen different aspects of CSS borders i.e width, style and color, all condensed into a single property, however we have seperate properties for dealing with these aspects at our dispense too.

And they are as follows:

1. border-width denotes the width of the border.
2. border-style denotes the style of the border.
3. border-color denotes the color of the border.

And these props work just like the three parameters we saw above. You would only need them when you want to alter an aspect of a border without affecting the others.

What this means is that if you have 3 different elements, for example, with a 10px solid border and want to change their border colors only instead of going like:

p {border: 1px solid black;}
p:nth-child(2) {border: 1px solid orange;}
p:nth-child(3) {border: 1px solid blue;}

you can simply do the following:

p {border: 1px solid;}
p:nth-child(2) {border-color: orange;}
p:nth-child(3) {border-color: blue;}

Since we don't need to alter the width or style of the borders on the three elements and need to do that only with the color - we use the border-color property.

You want to apply a border on all sides of an element, and you are all perfect in it.

But what if someone asks you to give different borders on different sides? How to style a side or two differently from others? Luckily CSS gives us properties for this case too.

To apply bordes on the top, right, bottom and left edges of an HTML element we have the border-top, border-right, border-bottom and border-left properties respectively.

All of them work the way border does - same parameters for example border-top: 1px solid black and the same sub properties for example border-top-width, border-left-color etc.

So let's transform these concepts into some working examples

Give a 3px border to the left side of p ONLY:

p {border-left: 3px solid gold}

Give all sides a 1px black border except for the left side with a 5px blue border:

p {
    border: 1px solid black; /*apply borders on all sides*/
    border-left: 5px solid blue; /*over-ride left border*/
}

p {
    border-top: 1px solid black;    
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 5px solid blue;
}

Give a 2px black border on all sides except for the left one. It should have a 10px border width, with color and style same as that of the rest sides.

p {
    border: 2px solid black;
    border-left-width: 10px; /*change left border's width*/
}

Here since we only need to alter the width of the left border we use the border-left-width property - we don't need to write unneccessarily and we even shouldn't!

Try to experiment with these properties in different ways and this is just the best way to learn them.

To round borders in CSS we can use the border-radius property specifying it the radius of a border's corner.

The greater the value of the radius, the rounder the border.

So coming back to CSS if given one value, border-radius applies the radius to all corners of the element:

p {
    border: 2px solid black;
    border-radius: 5px;
}

With two values border-radius applies the first value to the top-right and bottom-left corners and the second one to the top-left and bottom-right corners.

Following we have a border with radius 5px.

p {
    border: 2px solid black;
    border-radius: 5px;
}

Following we have a border with radius 20px.

p {
    border: 2px solid black;
    border-radius: 20px;
}

You can remember border-radius in this way:

1. Start at the top-right corner and go to the diagonally opposite corner - this is the first parameter
2. Then go down to the bottom-right corner and go diagonally opposite - this is the second parameter.

Like many CSS properties, border-radius also has seperate properties to take on its different parameters and they are border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius.

Try to relate the names of these properties to the corners they deal. Much in CSS can be understood by the naming of the properties.

And this marks the end of CSS borders.