| |
Border Width
The width of the border is the amount of space on the page that the border will take up. Possible values for border width can be:
- thin - It defines a thin border.
- medium - It defines a medium border.
- thick - It defines a thick border.
- length - It allows the user to specify the thickness of the border.
The border width property can also be used to give a different width to each edge of the element. For this purpose, more than one value for the property can be used.
- If only one value is specified then the same width is set for all borders.
| Example |
table { border-width : thin;}
In this, all four borders will be thin. |
| |
- If two values are defined then top and bottom edges are set to first value. Left and right are set to the second value.
| Example |
table { border-width : thin thick;}
In this, the top and bottom borders will be thin whereas left and right borders will be thick. |
| |
- If three values are defined, then top edge width is set to the first value, left and right edge width to the second value, and the bottom edge width to the third value.
| Example |
table { border-width : thin thick medium;}
In this, the top border will be thin, left and right border will be thick, and bottom border will be medium. |
| |
- If four values are defined, then the first value is set for the top edge width, second value for the left edge width, third value for the bottom edge width, and the fourth value for the right edge width.
| Example |
table { thin thick medium none;}
In this, the top border will be thin, right border will be thick, bottom border will be medium and left edge will have no border. |
| |
| Note |
| Always declare the Border-style property before using the border-width property. An element must have borders before you change their width. |
Border width properties can also be explicitly defined corresponding to each edge. These are explained below.
Border-Bottom-Width
This property sets the border width for bottom edge.
Example |
p { border-style : solid ;
border-bottom-width : thick;}
|
The bottom width here is thick.
|
Border-Top-Width
This property sets the border width for top edge.
Example |
|
| p{ border-style : inset ;
border-top-width : 10px;}
|
The top width here is 10 pixel with border style set as inset.
|
| |
Border-Left-Width
This property sets the border width for left edge. ements.
| Example: |
p{ border-style : dashed;
border-left-width : 12px;}
|
The left width is 12 pixel with border style set as dashed.
|
Border-Right-Width
This property sets the border width for right edge.
Example |
|
| p{ border-style : double;
border-right-width : 12px;}
|
The right width is 12 pixel with the border style set as double.
|
| |
Border colors
Colors can also be defined to match with your web pages. Border color property sets the color of the four borders. Possible values for border-color property are:
- color - The color value can be a color name ( like, red, green, blue, black etc.) or an rgb value ( like rgb(255,255,0), i.e. defining value for each red, green and blue) or a hexadecimal number ( like #00ff00).
- transparent - The border is transparent .
Border-color property can be set for each edge to a different color, similarly as different border style and width can be set for each edge.
- If only one color value is specified, then the same color is set for each of the edges.
| Example |
table { border-color : red;}
Here all four borders will be of red color. |
| |
- If two color values are specified, then the first value is set for the top and bottom edges and the second value is set for the left and right edges.
| Example |
table { border-color : red blue;}
Here, the top and bottom borders will be red and left and right borders will be blue. |
| |
- If three color values are specified, then the first value is set for the top edge, the second value is set for the left and right edges, and the third color value is set for the bottom edge.
| Example |
table { border-color: red green blue;}
Here, the top border will be red, the left and right border will be green, and the bottom border will be blue. |
| |
- If four color values are specified, then all the four color values are set for the top, left, bottom and right edges respectively.
| Example |
table {border-color : red green blue yellow;}
Here, the colors red, green, blue, and yellow will be applied to top, right, bottom and left borders respectively. |
| |
| Note |
If only border-style property is set then only border color of the element will be drawn. |
| |
Border color properties can also be explicitly defined corresponding to each edge:
Border-Bottom-Color
This property sets the border color for bottom edge.
Example |
p{ border-style : double;
border-bottom-color : red;}
|
In this example, border style is double with bottom border color as red.
|
Border-Top-Color
This property sets the border color for top edge
Example |
p{ border-style : dashed;
border-bottom-color : rgb(112,255,112);}
|
Here, border-style is dashed and bottom edge has a color defined by using rgb value.
|
Border-Left-Color
This property sets the border color for left edge.
Example |
p{ border-style : dotted;
border-left-color : #ff00ff;}
|
In this example, border style is dotted and left edge has a color defined using hexadecimal number.
|
Border-Right-Color
This property sets the border color for right edge.
Example |
p{ border-style : solid;
border-right-color : #purple;}
|
In this example, border style is solid and left border color as purple.
|
| |
| |
| Summary |
| |
In this chapter you have learnt:
- Various style options available for borders
- How border-style properties can be applied corresponding to each edge of the element
- How to specify the border-width
- Specifying the border color
|
| |
| |
| Review Questions |
| |
Fill in the Blanks
- If two styles are defined for the border-style property, then first value is for____ and ____ edges and the second value specifies _____ and ____ edges.
- _____ property specifies the amount of space that the border will take up.
- If 'border-style : dashed' is defined, then it will set the border style for _____ edges.
Solutions
- Top, bottom, left, right
- Border-width
- All
State Whether True or False
- The property {border-bottom-grooved}, sets the border style grooved for top edge.
- Border style should be declared first before setting its width.
- {border-color: red green blue}, will set the left border to red, top and bottom border to green and right border to blue.
Solutions
- False
- True
- False
| Exercise |
| Create a table with different border styles. |
| Solution |
|
|
| |
| What's Next |
The next chapter introduces the concepts of margin and padding around elements. It will also define setting of space around each edge of the HTML element.
Hop over to the next chapter to get a close-up on margins and paddings.
|
| |
| |
|
