| |
| |
| Overview |
| |
In this chapter you will learn:
- How to customize the border using various styles
- Applying border style properties with respect to each edge of an element
- Defining the border width
- Specifying different colors for the border edges
|
CSS makes possible a lot of customization to be added to your web document. It is possible to put borders around elements with CSS. Various border properties let you modify the border using varying styles, colors and widths.
A border around an element can be created with the attributes: border style, border width, and border colors.
Border Style
The way the border will look constitutes the border style. Possible values for style are: none, dotted, groove, dashed, ridge, inset, outset. Border style can be used to give different styles to each edge of an element.
- If only one border style value is specified, then the same border style is applied to each of the edges.
| Example |
table { border-style : dashed;}
In this, all the four borders will be dashed.
|
| |
- If two styles are defined, then the first value is for the top and bottom edges, the second specifies the border style of the left and right edges.
| Example |
table { border-style : dotted dashed;}
In this, the border of top and bottom edges will be dotted and left and right border will be dashed. |
| |
- When three border styles are defined, the first value specifies the border style of the top edge; the second value for the left and right edges and the third value for the bottom edge.
| Example |
table { border-style : dashed dotted groove;}
In this example, the top edge will be dotted, left and right border will be dashed and bottom border will be grooved. |
| |
- When four border styles are defined, they are specified for top, left, bottom and right edges respectively.
| Example |
table { border-style : double dashed dotted solid;}
In this example, the top border will be double, right border will be dashed, bottom border will be dotted and left border will be solid. |
| |
Possible style values are :
- none - It defines no color.
- dotted - It defines a dotted border.
- dashed - It defines a dashed border.
- solid - It defines a solid border.
- double - It defines 2 borders.
- grooved - It defines a 3-D grooved border.
- ridge - It defines a 3-D ridged border.
- inset - It defines a 3-D inset border.
- outset - It defines a 3-D outset border.
We can also explicitly define various border style properties corresponding to each edge. They are explained below.
Border-Bottom-Style
This property sets the border style for bottom edge.
Example |
p { border-bottom-style : dotted;}
|
Here the bottom is Dotted
|
Border-Top-Style
This property sets the border style for top edge.
Example |
p { border-top-style : dashed;}
|
In this example, top edge is dashed.
|
Border-Left-Style
This property sets the border style for left edge only.
Example |
|
p { border-left-style : inset;}
|
See the left side, with inset border style property.
|
Border-Right-Style
This property sets the border style for right edge.
Example |
|
| p { border-right-style : ridge;}
|
Here, right edge has the border style with ridge value
|
|
|
|
