CSS border properties and drawing various shapes with border

CSS Border Properties

Definition and Usage

The border shorthand property sets all border properties in a declaration.

The following properties can be set sequentially: Border-width Border-style Border-color

If you do not set one of these values, there will be no problems, such as Border:solid #ff0000; is also allowed.

Default value:	Not specified
Inheritance:	No
Version:	CSS1
JavaScript Syntax:	Object.style.border= "3px solid Blue"

Possible values

value	Description
Border-width	Specifies the width of the border. See: Possible values in Border-width.
Border-style	Specifies the style of the border. See: Possible values in Border-style.
Border-color	Specifies the color of the border. See: Possible values in Border-color.
Inherit	Specifies that the settings for the border property should be inherited from the parent element.

CSS Border-width Properties
definition and usage

The Border-width shorthand property sets the width for all borders of an element, or individually for each edge border.

Only works if the border style is not none. If the border style is none, the border width is actually reset to 0. You are not allowed to specify a negative length value.

Possible values

value	Description
Thin	Defines a thin border.
Medium	Default. Defines a medium border.
Thick	Defines a thick border.
Length	Allows you to customize the width of the border.
Inherit	Specifies that the border width should be inherited from the parent element.

CSS Border-style Properties
definition and usage

The Border-style property is used to style all borders of an element, or to individually set border styles for each edge.

The border may appear only if the value is not none.
Possible values

value	Description
None	Defines no border.
Hidden	Same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables.
Dotted	Defines a point border. Renders as solid lines in most browsers.
Dashed	Defines a dashed line. Renders as solid lines in most browsers.
Solid	Defines a solid line.
Double	Define two lines. The width of the double line equals the value of border-width.
Groove	Defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge	Defines a 3D ridge-shaped border. The effect depends on the value of the Border-color.
Inset	Defines a 3D inset border. The effect depends on the value of the Border-color.
Outset	Defines a 3D outset border. The effect depends on the value of the Border-color.
Inherit	Specifies that the border style should be inherited from the parent element.

CSS Border-color Properties

Definition and Usage

The Border-color property sets the color of the four border. This property can be set to 1 to 4 colors.

The Border-color property is a shorthand property that sets the color of the visible part of all the borders of an element, or sets a different color for 4 edges.
Possible values

value	Description
Color_name	Specifies the color value for the border color of the color name (such as red).
Hex_number	A border color (such as #ff0000) that specifies a hexadecimal value for the color value.
Rgb_number	Specifies the color value for the border color of the RGB code (such as RGB (255,0,0)).
Transparent	The default value. The border color is transparent.
Inherit	Specifies that the border color should be inherited from the parent element.

The use of CSS graphics, is a pros and cons of the wording, the advantage is not to draw, and save some traffic, the disadvantage is to write long string of CSS style, and there may be no reduction in traffic, depending on the circumstances, personal choice.

Here are some of my test graphics, but also refer to some sites, simple comments and summed up a bit, which does not involve complex CSS graphics.

Some of the properties of css3.0 are used, so here is the statement: please read this article with a browser that supports css3.0.

Above these few relatively simple, there is nothing to explain, see the following source:

/* Square */
. Square {width:100px; height:100px; background: #669;}

/* Rectangle *
/. Rectangle {width:200px; height:100px; background: #669;}

/* trapezoid */
. trapezoid {

border-bottom:100px solid #669;

border-left:50px solid Transparent;

border-right:50px solid Transparent;

height:0;

width:100px; }

/* Parallelogram */
. Parallelogram {

width:150px;

height:100px;

-webkit-transform:skew ( -20DEG);

-moz-transform:skew ( -20DEG);