CSS3 Examples: CSS Borders

CSS BORDER-BOTTOM-COLOR

Written by jon on 12:10 AM

This property controls the color of the bottom border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-bottom-color: green }

<div style=”border-bottom-color: #008000″>this is green</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
transparent	The border is transparent (with any accompanying ‘border-width' thickness) - eg: elements below it shine through.
[color]	Sets the border to the indicated color value.

| Posted in » CSS Borders

CSS BORDER-RIGHT-COLOR

Written by jon on 12:09 AM

This property controls the color of the top border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-right-color: green }

<div style=”border-right-color: #008000″>this is green</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
transparent	The border is transparent (with any accompanying ‘border-width' thickness) - eg: elements below it shine through.
[color]	Sets the border to the indicated color value.

| Posted in » CSS Borders

CSS BORDER-TOP-COLOR

Written by jon on 12:08 AM

This property controls the color of the top border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-top-color: green }

<div style=”border-top-color: #008000″>this is green</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
transparent	The border is transparent (with any accompanying ‘border-width' thickness) - eg: elements below it shine through.
[color]	Sets the border to the indicated color value.

| Posted in » CSS Borders

CSS BORDER-COLOR

Written by jon on 12:07 AM

This is a shorthand property which allows an author to specify ‘border-top-color’, ‘border-right-color’, ‘border-bottom-color’, and ‘border-left-color’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

em { border-color: blue }

<em style=”border-color: #ff0000 green”>this is an emphasized test</em>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
transparent	The border is transparent (with any accompanying ‘border-width' thickness) - eg: elements below it shine through.
[color]	Sets the border to the indicated color value.

| Posted in » CSS Borders

CSS BORDER-LEFT-STYLE

Written by jon on 12:02 AM

This property controls the line style of the left border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-left-style: groove }

<strong style=”border-left-style: groove”>this is a test</strong>

Possible Values

Value	Description
inherit	Explicitly sets the value of this property to that of the parent.
none	No border is rendered. This overrides any value of ‘border-width', if present.
hidden	Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements.
dotted	The border is rendered as a series of dots.
dashed	The border is rendered as a series of short lines.
solid	Renders a solid line.
groove	Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property.
ridge	Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property.
inset	Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'.
outset	Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'.
double	A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property.

| Posted in » CSS Borders

CSS BORDER-BOTTOM-STYLE

Written by jon on 12:01 AM

This property controls the line style of the bottom border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-bottom-style: groove }

<strong style=”border-bottom-style: groove”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	No border is rendered. This overrides any value of ‘border-width', if present.
hidden	Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements.
dotted	The border is rendered as a series of dots.
dashed	The border is rendered as a series of short lines.
solid	Renders a solid line.
groove	Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property.
ridge	Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property.
inset	Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'.
outset	Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'.
double	A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property.

| Posted in » CSS Borders

CSS BORDER-RIGHT-STYLE

Written by jon on 12:00 AM

This property controls the line style of the right border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-right-style: groove }

<strong style=”border-right-style: groove”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	No border is rendered. This overrides any value of ‘border-width', if present.
hidden	Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements.
dotted	The border is rendered as a series of dots.
dashed	The border is rendered as a series of short lines.
solid	Renders a solid line.
groove	Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property.
ridge	Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property.
inset	Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'.
outset	Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'.
double	A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property.

| Posted in » CSS Borders

CSS BORDER-TOP-STYLE

Written by jon on 11:58 PM

This property controls the line style of the top border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-top-style: groove }

<strong style=”border-top-style: groove”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	No border is rendered. This overrides any value of ‘border-width', if present.
hidden	Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements.
dotted	The border is rendered as a series of dots.
dashed	The border is rendered as a series of short lines.
solid	Renders a solid line.
groove	Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property.
ridge	Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property.
inset	Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'.
outset	Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'.
double	A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property.

| Posted in » CSS Borders

CSS BORDER-STYLE

Written by jon on 11:57 PM

This is a shorthand property which allows an author to specify ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, and ‘border-left-style’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Example

strong { border-style: groove inset solid none }

<strong style=”border-style: dotted”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	No border is rendered. This overrides any value of ‘border-width', if present.
hidden	Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements.
dotted	The border is rendered as a series of dots.
dashed	The border is rendered as a series of short lines.
solid	Renders a solid line.
groove	Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property.
ridge	Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property.
inset	Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'.
outset	Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'.
double	A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property.

| Posted in » CSS Borders

CSS BORDER-LEFT-WIDTH

Written by jon on 11:56 PM

This property controls the thickness (width) of the left border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-left-width: 5mm }

<strong style=”border-left-width: 10px”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
thin medium thick	Renders a “thin”, “medium” or “thick” border on the left side of the element's rendering box. The actual thickness of these border values is not specified, but “thin” should have a smaller thickness than “medium”, which should have a smaller thickness than “thick”.
[length]	Sets the width of the border on the left side of the element's rendering box to an explicit measurement.

| Posted in » CSS Borders

CSS BORDER-BOTTOM-WIDTH

Written by jon on 11:55 PM

This property controls the thickness (width) of the bottom border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-bottom-width: medium }

<strong style=”border-bottom-width: 10px”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
thin medium thick	Renders a “thin”, “medium” or “thick” border on the bottom side of the element's rendering box. The actual thickness of these border values is not specified, but “thin” should have a smaller thickness than “medium”, which should have a smaller thickness than “thick”.
[length]	Sets the width of the border on the bottom side of the element's rendering box to an explicit measurement.

| Posted in » CSS Borders

CSS BORDER-RIGHT-WIDTH

Written by jon on 11:54 PM

This property controls the thickness (width) of the right border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-right-width: 10px }

<strong style=”border-right-width: 10px”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
thin medium thick	Renders a “thin”, “medium” or “thick” border on the right side of the element's rendering box. The actual thickness of these border values is not specified, but “thin” should have a smaller thickness than “medium”, which should have a smaller thickness than “thick”.
[length]	Sets the width of the border on the right side of the element's rendering box to an explicit measurement.

| Posted in » CSS Borders

CSS BORDER-TOP-WIDTH

Written by jon on 11:53 PM

This property controls the thickness (width) of the top border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-top-width: thin }

<strong style=”border-top-width: thin”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
thin medium thick	Renders a “thin”, “medium” or “thick” border on the top side of the element's rendering box. The actual thickness of these border values is not specified, but “thin” should have a smaller thickness than “medium”, which should have a smaller thickness than “thick”.
[length]	Sets the width of the border on the top side of the element's rendering box to an explicit measurement.

| Posted in » CSS Borders

CSS BORDER-WIDTH

Written by jon on 11:51 PM

This is a shorthand property which allows an author to specify ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, and ‘border-left-width’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Example

strong { border-width: thick thin }

<strong style=”border-width: thick thin thick thin”>this is a test</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
thin medium thick	Renders a “thin”, “medium” or “thick” border for a side of the element's rendering box. The actual thickness of these border values is not specified, but “thin” should have a smaller thickness than “medium”, which should have a smaller thickness than “thick”.
[length]	Sets the width of the border for a side of the element's rendering box to an explicit measurement.

| Posted in » CSS Borders

CSS BORDER-LEFT

Written by jon on 11:51 PM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the left border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-left: 10px outset #ffffff }

<div style=”border-left: 10px outset #ffffff”>this is a test</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[border-width]	Uses a [border-width] value to render the left border for an element.
[border-style]	Uses a [border-style] value to render the left border for an element.
[border-color]	Uses a [border-color] value to render the left border for an element.

| Posted in » CSS Borders

CSS BORDER-BOTTOM

Written by jon on 11:49 PM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the bottom border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-bottom: 10px outset #ffffff }

<div style=”border-bottom: 10px outset #ffffff”>this is a test</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[border-width]	Uses a [border-width] value to render the bottom border for an element.
[border-style]	Uses a [border-style] value to render the bottom border for an element.
[border-color]	Uses a [border-color] value to render the bottom border for an element.

| Posted in » CSS Borders

CSS BORDER-RIGHT

Written by jon on 11:48 PM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the right border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-right: 10px outset #ffffff }

<div style=”border-right: 10px outset #ffffff”>this is a test</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[border-width]	Uses a [border-width] value to render the right border for an element.
[border-style]	Uses a [border-style] value to render the right border for an element.
[border-color]	Uses a [border-color] value to render the right border for an element.

| Posted in » CSS Borders

CSS BORDER-TOP

Written by jon on 11:46 PM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the top border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-top: 10px outset #ffffff }<div style=”border-top: 10px outset #ffffff”>this is a test</div>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[border-width]	Uses a [border-width] value to render the top border for an element.
[border-style]	Uses a [border-style] value to render the top border for an element.
[border-color]	Uses a [border-color] value to render the top border for an element.

| Posted in » CSS Borders

CSS Border

Written by jon on 7:14 AM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for all the borders of an element’s rendering box at once. Unlike the ‘margin’ and ‘padding’ properties, this property cannot specify different values for each side. To do this, use the properties for each side instead (’border-top’, ‘border-right’, ‘border-bottom’ and ‘border-left’.)

Example

blockquote { border: medium dashed #ff0000 }

<blockquote style=”border: medium dashed #ff0000″>This is some text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[border-width]	Uses a [border-width] value to render the border for an element's rendering box.
[border-style]	Uses a [border-style] value to render the border for an element's rendering box.
[border-color]	Uses a [border-color] value to render the border for an element's rendering box.

| Posted in » CSS Borders

Subscribe to: Posts (Atom)