Creating Borders
Posted The: 23/03/2008 At: 3:07
Last Edited: 30/04/2009 At: 20:55
Contents:
This article covers basic usage of some of the border specifications, see Border Properties for a full list of properties.
Short-hand specifications
The first example will apply a 1px border, of type "solid" to a div, but generally any element can be used, another example could be img elements, or even p elements.
div { /* This is a Comment */
border: 1px solid black;
}
Which results in something like:
Border-top||bottom||right||left
Note: if you want to give each border its own style, do something like the below:
div { /* This is a Comment */
border-top: 5px solid purple;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 5px solid purple;
}
Which results in something like:
Keywords for Thickness
- thin
- medium
- tick
Defines the thickness of the border, it is recommended to use an absolute value such as px, since the exact value varies across browsers.
Styling Keywords
- solid
- dashed
- none
- double
- groove
- ridge
- inset
- outset
- dotted
Used to apply the given styling.
Comments: [0]
