Css

Creating borders is one of the most common ways to decorate containers;
You may see borders used in almost any website;
Let's talk about border-properties.

Start Reading ;

The border properties

There are 4 properties which can help us to quickly create borders around containers:

And here is their common syntax:

border-left: 5px solid Black;

The first value 5px is width of the border;
The second value solid is the border’s style;
And the last value is color of the border.
There are plenty of border-styles that you can find here: List of border-styles.

Let’s decorate a button using border properties.

HTML code:

CSS code:

Result:

See the Pen Explore by Kei Nart (@codenart) on CodePen.

If the 4 borders have the same values, there is a short form of border properties which can help us to specify all 4 borders in a single line of code.

border: 2px solid DodgerBlue;

To remove a border, we can just say none:

border-left: none;

And, to remove all borders:

border: none;

The border-radius properties

The border-radius properties help us to make containers’ corners rounded. These properties are independent from the border properties in the previous section, even though their names look quite similar.

Basically, there are 4 border-radius properties:

Let’s change style of the button in the first section. This time we’re gonna give it rounded corners and filled background.

CSS code:

Result:

See the Pen Explore (rounded) by Kei Nart (@codenart) on CodePen.

There is also a short form of border-radius properties which can help us to specify 4 values in a single line of code. The four values are placed in order: top-left, top-right, bottom-right, bottom-left. (clockwise)

border-radius: 3px 24px 3px 24px;

If there are only 2 values used in the short form, the first value will be applied to top-left & bottom-right corners, the second value will be applied to top-right & bottom-left corners.

border-radius: 3px 24px;

If all 4 corners are rounded equally, we can use the short form with only 1 value.

border-radius: 25px;

The box-sizing property

This property is out of plan but it is related to using borders. :D

Let’s assume that we have a 300px wide container and we create a 5px wide border-left. We’ll have an element which is 305px wide (in total) because the border will be drawn outside container’s area. This is default behavior of web browsers and set by the rule:

box-sizing: content-box;

But, sometimes we want to make sure that final size of some elements will not change whether they have border or not. This can be done by changing value of the box-sizing property:

box-sizing: border-box;

The border-box value will tell web browsers that border will be drawn inside container’s area.

To make it clear, the example below will demonstrate those two values of the box-sizing property.

HTML code:

CSS code:

Result:

See the Pen Yummy by Kei Nart (@codenart) on CodePen.

Our tutorial about borders has finished. Now we’ve known how to style containers. In the next tutorial, we’ll talk about how to set position and align containers.

P/s: Besides background and border properties, there are also some other properties which can help us to style containers for various purposes. The properties will require Internet Explorer version 9+ and newer technology web browsers like Chrome, Firefox, Opera, etc. In case you want to go further, please check out these two properties:

Next: Position Properties ;