Boxes in CSS: Borders

For the CSS language, everything is contained in a box. You can clearly see this when you draw a table. With this in mind, the next step is to manage these boxes as you need to do it. For this, the first elements we are looking at are the borders:

Border options in CSS

Given that every box has its border, with CSS you are able to manage how thick they will look, what style will they have and what colour will they be. Thus, the basic three CSS instructions for borders are:

border-width
border-style
border-color

border-width accepts thin, medium or thick as values, or a specific measurement. border-style specifies whether the look of the border will be none, hidden, dotted, dashed, solid, double, groove, ridge, inset or outset (try them out to see what effect each of these commands give to the border). Last, border-color specifies the colour either by name, rgb or hexadecimal value.

To specify the characteristics of a single border of a box, you just need to add top, right, bottom or left. Adding these words to the instruction allows you to specify CSS properties even more:

border-width-top
border-style-top
border-color-top
border-width-right
border-style-right
border-color-right
border-width-bottom
border-style-bottom
border-color-bottom
border-width-left
border-style-left
border-color-left

Use these instructions with the same options you have above.

Examples

If, for example, you want to give a small light brown frame to every photograph you have on your website, you can specify it like this:

img {
border-width-top: 2px;
border-style-top: solid;
border-color-top: #ebdea4;
border-width-right: 2px;
border-style-right: solid;
border-color-right: #ebdea4;
border-width-bottom: 2px;
border-style-bottom: solid;
border-color-bottom: #ebdea4;
border-width-left: 2px;
border-style-left: solid;
border-color-left: #ebdea4;
}

It looks long, doesn't it? Don't worry because contractions will help you a lot with this. Just in case, don't forget any semicolon on the CSS instructions or else this won't work properly.

Contractions

OK, pay attention because this is very important. In CSS language, instructions work clockwise, starting from the top. So, if you want to avoid writing all the lines I have typed above, you can just type this:

img {
border: 2px solid #ebdea4;
}

You can do it this simple because all the four borders are the same width, style and desired colour. If you need to specify, then you need to use these instructions:

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

Just don't forget that in both cases you need to specify the data in the same order: width, style and colour.


Knowledge + Computers