How To Edit Your Themes Stylesheet – Part 4 Borders
Using your theme’s style.css, you can edit the border properties of the various elements included on your page, this includes images, title bars, advert holders, headings etc.
Now I have to be honest here, borders are one area that I never paid much attention to, I guess because most themes I have tried have automatically had borders set to “0″ or “none” & therefore they have not really been brought to my attention as it were.
However once they had been brought to my attention & I had done some research & played around a little by editing my borders, I was amazed to see what a difference it had made to my website. No profound changes really, not like a total change of theme, but more subtle changes yet it added a little something to the overall look and feel of the theme.
Therefore this article is going to try and enlighten you on how to edit your themes stylesheet & what sort of borders are available for you to use. By using the CSS border properties you can specify the border width, style and colour of an element’s border.
Border Width
The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The “border-width” property does not work if it is used alone. Use the “border-style” property to set the borders first, even if you simply set the style to “solid”
Example:
heading h2
{
border-style:solid;
border-width:5px;
}
heading h3
{
border-style:solid;
border-width:medium;
}
Border Style
The border-style property specifies what kind of border to display. None of the border properties will have ANY effect unless the border-style property is set!
Border-Style Values
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Border Color
The border-color property is used to set the color of the border. The color value can be set as:
- name – specify a color name, like “red”
- RGB – specify a RGB value, like “rgb (255,0,0)”
- Hex – specify a hex value, like “#ff0000″
Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.
Example:
heading h2
{
border-style:solid;
border-color:red;
}
heading h3
{
border-style:solid;
border-color:#98bf21;
}
Border – Individual Sides
In CSS it is possible to specify different borders for different sides:
Example:
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
The example above can also be set with a single property:
Example:
border-style:dotted solid;
The border-style property can have from one to four values.
border-style:dotted;
- all four borders are dotted
border-style:dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
border-style:dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
border-style:dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
The border-style property is used in the example above. However, it also works with border-width and border-color.
Border – Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the border properties in one property. This is called a shorthand property. The shorthand property for the border properties is “border”
When using the border property, the order of the values are:
1. border-width - 2. border-style - 3. border-color
It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order.
Related posts:
