Borders
Content:
Adding borders:
The "border" property allows you to add a custom border to HTML elements. It is possible to add borders to practically anything; tables, divs, images, paragraphs, text, etc. You can also specify a border to any element in your profile that has been assigned a class, such as your .leftnav and your .userinfo. You can even put a border around your entire profile!
Adding borders to a scrollbox:
|
Example:
|
|
<div style="height: 60px; width: 200px; overflow: auto; border: 1px solid white"></div>
|
Adding borders to a picture:
|
Example:
|
 <img src="http://IMAGE_URL_HERE.jpg" style="border: 5px outset purple"> |
Adding borders to your .leftnav:
|
Example:
|
| <style> .leftnav{ border: 3px solid white; } </style> |
Adding borders around your entire profile:
|
Example:
|
| <style> body{ border: 40px solid purple; } </style> |
Border-style:
The "border-style" property sets the style of the border. You can choose between eight different styles; solid, double, dashed, dotted, inset, outset, ridge and groove.
|
Example:
|
|
border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;
|
Border-width:
The "border-width" property sets the width of the border.
|
Example:
|
|
border-width: 1px;
border-width: 3px;
border-width: 5px;
|
Border-color:
The "border-color" property sets the color of the border. You can either use a hex code or a valid color name.
|
Example:
|
|
border-color: #000000;
border-color: purple;
|
All in one:
You can also style the borders by using one shorthand declaration, instead of having three different properties.
|
Example:
|
|
Full code:
border-style: dotted; border-width: 3px; border-color: white;
Shorthand code:
border: 3px dotted white;
|
Different borders on each side:
It's even possible to set different styles on each side on an element.
|
Example:
|
|
border: 3px solid orange; border-top: 5px solid white;
border-top: 3px dotted yellow; border-bottom: 3px solid lime; border-left: 3px groove red; border-right: 3px inset white;
border-bottom: 2px dashed white;
|
Rounded corners:
You can give your elements rounded corners, however this will only work in Firefox.
|
Example:
|
|
-moz-border-radius: 5px
-moz-border-radius: 7px
-moz-border-radius: 10px
|