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>
Output
Example
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
- solid
- dashed
- dotted
- none
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>
or
<p style="border-style: dashed solid dotted none;">Example!</p>
Both output
Example!
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>
Output
Example
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>
or
<p style="border-top-width: 5px; border-right-width: 3px; border-bottom-width: 1px; border-left-width: 0px; border-style: solid;">Example
Both output
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>
Output
Example
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>
or
<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>
Both Output
Example
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>
Output
Example
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>
Output
Example
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.