With CSS borders you get more functionality. Before you will see any border however, it is necessary to set the border style, which indicates what type of pattern the border will take on. Setting a solid border:
<p style="border-style: solid">Example</p>
As shown above, we have a solid border around the element. I will show you how to adjust the size and colour of the border in a moment! The different styles available for the border of an element are
You can set the style of the top, right, bottom and left borders individually, like so:
<p style="border-top-style: dashed; border-right-style: solid; border-bottom-style: dotted; border-left-style: none;">Example!</p>
<p style="border-style: dashed solid dotted none;">Example!</p>
The above show us giving the top border a dashed appearance, the right border will be solid, the bottom border will be a series of dots separated by spaces, and there will be no border on the left hand side of this element.
Setting the sizes of the border follows a very similar pattern to setting the padding and the margin. Overall border size:
<p style="border-width: 2px; border-style: solid;">Example</p>
The above shows how we set the overall border size to 2 pixels. Notice that it is necessary to specify the border style. This is because by default paragraphs have no border. There's no point in setting the width of something that isn't there alone! You can also set the individual border sizes.
<p style="border-width: 5px 3px 1px 0px; border-style: solid;">Example</p>
<p style="border-top-width: 5px; border-right-width: 3px; border-bottom-width: 1px; border-left-width: 0px; border-style: solid;">Example
Both of the above examples will set the top border to 5px, the right border to 3px, the bottom border to 1px, and the left border to 0px.
And finally, you can also set the colour of an element's borders. Setting the overall border colour in one go:
<p style="border-color: rgb(0,255,0); border-style: solid;">Example</p>
The above will give the element a green border. Remember to refer to my list of colour codes to get that specific colour you want. You can also set the colour of each individual border like so:
<p style="border-top-color:rgb(255,0,0); border-right-color:rgb(128,0,0); border-bottom-color:rgb(64,0,0); border-left-color:rgb(32,0,0); border-style: solid">Example</p>
<p style="border-color: rgb(255,0,0) rgb(128,0,0) rgb(64,0,0) rgb(32,0,0); border-style: solid">Example</p>
Last of all, you can also set all of the border properties at once. If you want to set all of the border properties for the entire border, you would do something like the following:
<p style="border: solid 1px black;">Example</p>
If you wanted to set the all of the properties this way for each individual border, you can do something like the following:
<p style="border-top: solid 1px black; border-right: dashed 1px rgb(32,32,32); border-bottom: dotted 5px rgb(0,0,255); border-left: none;">Example</p>
Unfortunately... the following will not work:
<p style="border: solid 1px black dashed 1px rgb(32,32,32) dotted 5px rgb(0,0,255) none;">Non-working example</p>
...which is a shame because it would be very speedy, even if slightly difficult to read by a human! Anyways, have a look at setting the borders yourself. Once you're all well and good with that, you'll be ready to take the end of chapter quizeruni.