More on the CSS Border
The CSS Border element allows you to customize the borders around HTML elements. On the previous CSS Border page you learned the different border styles, how to define the border width and how to define the border color.
On this page you will learn additional ways to create the CSS border you want.
CSS Border Sides
The CSS border element allows you to style each side of a border separately from the other three sides. Each side can have its own style, width and color. Just like the CSS margin and the CSS padding the choices are top, right, bottom, and left.
Below is the CSS that would be used if you want to declare a CSS border style, width and color for the top of an element.
{border-top-style: ????;}
{border-top-width: ????;}
{border-top-color: ????;}
Example - You want to have a solid border above a specific element.
The CSS for the top border example;
.border {
border-top-style:solid;
border-top-width:2px;
border-top-color:#900;
}
The html;
<p class="border">This sentence will have a solid 2px border above it.</p>
The display;
This sentence will have a solid 2px border above it.
CSS Border Sides Shorthand
Just like the regular CSS border shorthand you can shorthand the longer CSS border side attributes. With the example above the CSS border top can be shortened down to border-top:2px solid #900;
The CSS border sides attributes allow you the freedom to style any single, any two, any three or all four sides. You can style each side independantly of the others.
Now for an example of this. A paragraph with each side having a different style, width and color.
The CSS
.funkyborder {
border-top:5px solid #000;
border-right:10px outset #F00;
border-bottom:12px ridge #0F0;
border-left:9px groove #00F;
}
The html;
<p class="funkyborder">This sentence will have a funky border around it.</p>
This sentence will have a funky border around it.
CSS Border Colors
CSS borders can be so much fun. OK, now you want a border that has the same style and width values but you want to have a different color for each side.
This can be done in shorthand just like you learned with margins and paddings. In a clockwise direction starting with the top.
The CSS for the example;
.border {
border:3px solid;
border-color:#000 #F00 #0F0 #00F;
}
The html for this example;
<p class="border">This sentence will have the same border style and width but different colors on each side.</p>
This sentence will have the same border style and width but different colors on each side.
Hopefully you're not too confused about everything that can be done with borders and can see how much fun they can be.
Use the editor to play around with what you have learned about CSS borders I have left the style section empty for you. Just enter your choice of border styling you would like to use, play around and have fun with your new gained CSS Border knowledge.