Borders in CSS
This little tutorial is to expand your knowledge on working with borders in css. So let's just run through the basics first of all and be on our way. As it stands you will be using border-width: or border-color: and so on to set the properties of the border. But here we can start by explaining that using the 'border' will therefore place a border round the whole of the selected object. Now, this may seem as though we're stating the obvious here. But now we can break it down into doing borders for each side of the object separately. So now we can use the following: border-top border-right border-left border-bottom border The above denotes where your border is going to go and nothing else. You still need to consider the width, colour and style of your border. These will be done as border-right-style: or border-bottom-width: and so on. So let's now look at the different properties we can use with these borders. border-width: setting the width you can use a set of terms [ thin/medium/thick ] or you can specify the width in pixels by doing border-width: 1px or border-right-width: 4px and so on. border-color: #colourcode (you do a different colour for each side of the object if you choose by doing borde-bottom-colour: red; and so on) border-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset (The style of your border is basically how it is going to look, you can try these out, but obviously if you do not specify a border style, the default is solid) So now that we have broken our border down a little more we have things that may look something like this (please note I have used a table as an example only you can apply these borders to anything) : table { border-right-width: 1px; border-right-color: red; border-right-style: dashed; } But that is a bit much to type out, so we do have a shortened version which is very handy to use especially if you are doing four different borders. table { border-right: 1px dashed red; } The same properties as before, but shortened down, to apply width, style and colour all to the same border - which makes your job a little easier. As you can see there isn't much to borders, but knowing how to put them together and knowing the different styles is always a good thing to remember.