The border properties are:
border-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-colorborder-styleborderborder-topborder-rightborder-bottomborder-left
Another result of the numerous shorthands is that the exact nature of the browser support for the different properties is difficult to express in one single place. Each of the properties has the usual information about how well they are supported individually. As well, though, we have some general information at the bottom of the page which clarifies (hopefully!) some of the more tricky issues involved in making borders actually work.
Unscrambling the border mess
As we've just seen, and a glance at the list of border properties will demonstrate, there is an almost bewildering array of border properties, many of which are shorthand ways of saying the same thing. For example, to give the top border a width, you could use any ofborder-top-width, border-width, border-top and border.As a general rule, you can do everything there is to do with border properties using the following straightforward approach.
To define the same border properties for each side of the element, use the border property. For example, to give each side of an element the same thin, red solid border, we'd use the following declaration
{border: thin red solid}
To define a border property for a given side of an element,
use the border-* property. For example, to give the top edge of an
element a thin, red solid border, and the bottom edge a thick black
dotted border we'd use the following declaration
{border-top: thin red solid;
border-bottom: thick black dotted}
It really is that simple. See below for details of what values you can give a border for itsborder-bottom: thick black dotted}
- width
- color
- style
border-width, border-top-width, border-left-width, border-bottom-width, border-right-width
What it does
These properties let you set the width of the respective edges individually or all at once.Possible values
Border widths can take either keyword values, or length values.The keyword values that can be used are
thinmediumthick
thin is not thicker than medium which is no thicker than thick.Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.
Default values
If no width is set, the thickness of a border ismedium.
Note that this does not mean that all elements have medium borders
unless otherwise defined, In order for an element to have a border, it
must be given a border style. Once you give it a style, it will then have a default width of medium.Is it inherited?
An element does not inherit the thickness of its parent element's border.Hints and suggestions
Theborder-width property can be used to set the
value of each edge separately. To do this, use more than one value for
the property. You can use between one value and four values for the border-width property.- One value sets all borders to the same width.
- Two values set the top and bottom edges to the first value and the left and right to the second.
- Three values set the top edge width to the first value, the left and right edge widths to the second value, and the bottom edge width to the third value.
- Four values set the top edge width to the first value, the left edge width to the second, the bottom edge width to the third and the right edge width to the fourth.
border-color
What it does
Unlike border widths which we have just seen,border-color is set using a single property. However, that doesn't mean you can't set each edge to a different color. As with the border-width shorthand property we just looked at, border-color enabled different edge colors by using more than one value.Possible values
border-color is specified by between one and four color values. We discuss color values in detail in our values section.You can use
border-color to give different colors to each edge of an element.- One color value specifies the same color for each edge.
- With two color values, the first value specifies the color of the top and bottom edges, the second specifies the color of the left and right edges.
- With three color values, the first value specifies the color of the top edge, the second the color of the left and right edges and the third the value of the bottom edge.
- With four color values, the four color values specify respectively the color of the top, left, bottom and right edges.
Default values
If no color is specified for the border, the border has the same value as the element itself, that is the value specified by thecolor
property. Note that this does not mean that all elements have a default
border of the same color as the color of their content. It means that
if you set a border-style only, your border will be drawn with a default color the same as the color of the element.Is it inherited?
Theborder-color of an element is not inherited from its parent element.Hints and suggestions
As with border widths (and all border properties) support for different edges is far from perfect in Netscape prior to version 6.border-style
What it does
In addition to width and color, the border of an element, or its individual edges can have a style.border-style is the basic border property. In order for a border to be drawn at all, you must define a border-style. Once you define a border-style, you can if you wish let the other properties, border-width and border-color, be set at their default values. Generally, though, you will probably want to define all three aspects of your borders.There are several possible styles, though not all are currently supported by major browsers.
Possible values
As withborder-color, different border-styles can be assigned to different edges of a border using the same syntax we saw for colors.You can use border-style to give different styles to each edge of an element.
- One border style value specifies the same border style for each edge.
- With two border style values, the first value specifies the border style of the top and bottom edges, the second specifies the border style of the left and right edges.
- With three border style values, the first value specifies the border style of the top edge, the second the border style of the left and right edges and the third the value of the bottom edge.
- With four border style values, the four border style values specify respectively the border style of the top, left, bottom and right edges.
border-style keywords arenonedotteddashedsoliddoublegrooveridgeinsetoutset
Basic Syntax :
style="border: 3px groove orange"
Default values
If noborder-style property is specified, the style of a border is none.Is it inherited?
Elements do not inherit theborder-style of their parent elements.Hints and suggestions
As with other border properties, support for specifying different edges of a border is far from perfect in major browsers.You should also keep in mind that some browsers do not support every kind of style. Usually, where a style keyword is not supported, the browser draws the border as
solid.border, border-top, border-left, border-bottom, border-right
What it does
As mentioned at the beginning of this section, there are confusingly many, and inconsistently different shorthand ways of specifying border values. These five properties let you specify with one property any or all of theborder-style, border-width and border-color values for each edge respectively, or the entire border.Possible values
The shorthand properties simply take the same possible values as the full properties. As with the long hand way of describing borders, if you only give a value for style the border will be drawn with a default width and color. To specify more than one property value with a shorthand property, simply separate the values by a space.For example, to specify the color, width and style of the top edge of a border of an element you could use the following single property
{border-top: red thick ridge}
0 comments:
Post a Comment