کاربر:Zaman/صفحه تمرینcss4

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


////////////////////////////////////////


CSS border-left Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the style of the left border for different elements:

h1 {

  border-left: 5px solid red;

}


h2 {

  border-left: 4px dotted blue;

}


div {

 border-left: double;

}

Try it Yourself »


Definition and Usage

The border-left property is a shorthand property for (in the following order):

  • border-left-width
  • border-left-style (required)
  • border-left-color

If border-left-color is omitted, the color applied will be the color of the text.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderLeft="3px dotted blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-left 1.0 4.0 1.0 3.5 1.0


CSS Syntax

border-left: border-width border-style border-color|initial|inherit;

Property Values

Value Description
border-left-width Optional. Specifies the width of the left border. Default value is "medium"
border-left-style Required. Specifies the style of the left border. Default value is "none"
border-left-color Optional. Specifies the color of the left border. Default value is the color of the text
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderLeft property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-left-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a color for the left border:

div {border-left-color: coral;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-left-color property sets the color of an element's left border.

Note: Always declare the border-style or the border-left-style property before the border-left-color property. An element must have a border before you can change the color.

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderLeftColor="blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-left-color 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-left-color: color|transparent|initial|inherit;

Property Values

Value Description Play it
color Specifies the color of the left border. Look at CSS Color Values for a complete list of possible color values. Default color is the color of the element Play it »
transparent Specifies that the border color should be transparent Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set a color for the left border with a HEX value:

div {border-left-color: #92a8d1;}

Try it Yourself »

Example

Set a color for the left border with an RGB value:

div {border-left-color: rgb(201, 76, 76);}

Try it Yourself »

Example

Set a color for the left border with an RGBA value:

div {border-left-color: rgba(201, 76, 76, 0.3);}

Try it Yourself »

Example

Set a color for the left border with a HSL value:

div {border-left-color: hsl(89, 43%, 51%);}

Try it Yourself »

Example

Set a color for the left border with a HSLA value:

div {border-left-color: hsla(89, 43%, 51%, 0.3);}

Try it Yourself »

Example

Set a transparent left border:

div {border-left-color: transparent;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-left property

HTML DOM reference: borderLeftColor property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-left-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the left border:

div {border-left-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-left-style property sets the style of an element's left border.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderLeftStyle="dotted"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-left-style 1.0 5.5 1.0 1.0 9.2


CSS Syntax

border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Specifies no border. This is default Play it »
hidden The same as "none", except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed left border:

div {border-left-style: dashed;}

Try it Yourself »

Example

A solid left border:

div {border-left-style: solid;}

Try it Yourself »

Example

A double left border:

div {border-left-style: double;}

Try it Yourself »

Example

Remove the left border:

div {border-left-style: none;}

Try it Yourself »

Example

A groove left border:

div {

 border-left-style: groove;

 border-left-color: coral;

 border-left-width: 7px;

}

Try it Yourself »

Example

A ridge left border:

div {

 border-left-style: ridge;

 border-left-color: coral;

  border-left-width: 7px;

}

Try it Yourself »

Example

An inset left border:

div {

  border-left-style: inset;

  border-left-color: coral;

  border-left-width: 7px;

}

Try it Yourself »

Example

An outset left border:

div {

 border-left-style: outset;

  border-left-color: coral;

 border-left-width: 7px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-left property

HTML DOM reference: borderLeftStyle property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-left-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a width for the left border:

div {border-left-width: thin;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-left-width property sets the width of an element's left border.

Note: Always declare the border-style or the border-left-style property before the border-left-width property. An element must have borders before you can change the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderLeftWidth="5px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-left-width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-left-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium left border. This is default Play it »
thin Specifies a thin left border Play it »
thick Specifies a thick left border Play it »
length Allows you to define the thickness of the left border. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of the left border to medium:

div {border-left-width: medium;}

Try it Yourself »

Example

Set the width of the left border to thick:

div {border-left-width: thick;}

Try it Yourself »

Example

Set the width of the left border to 1px:

div {border-left-width: 1px;}

Try it Yourself »

Example

Set the width of the left border to 15px:

div {border-left-width: 15px;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-left property

HTML DOM reference: borderLeftWidth property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-radius Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Add rounded corners to two <div> elements:

#example1 {

 border: 2px solid red;

  border-radius: 25px;

}


#example2 {

  border: 2px solid red;

  border-radius: 50px 20px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-radius property defines the radius of the element's corners.

Tip: This property allows you to add rounded corners to elements!

This property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.borderRadius="25px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius 5.0

4.0 -webkit-

9.0 4.0

3.0 -moz-

5.0

3.1 -webkit-

10.5


CSS Syntax

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Property Values

Value Description Play it
length Defines the shape of the corners. Default value is 0. Read about length units Play it »
% Defines the shape of the corners in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set rounded corners for an element with a background color:

#rcorners1 {

 border-radius: 25px;

 background: #73AD21;

 padding: 20px;

 width: 200px;

 height: 150px;

}

Try it Yourself »

Example

Set rounded corners for an element with a border:

#rcorners2 {

  border-radius: 25px;

  border: 2px solid #73AD21;

  padding: 20px;

  width: 200px;

  height: 150px;

}

Try it Yourself »

Example

Set rounded corners for an element with a background image:

#rcorners3 {

 border-radius: 25px;

 background: url(paper.gif);

 background-position: left top;

  background-repeat: repeat;

 padding: 20px;

 width: 200px;

 height: 150px;

}

Try it Yourself »

Example

Also notice this:

#example1 {

 border-radius: 2em / 5em;

}

/* is equivalent to:

border-top-left-radius: 2em 5em;

border-top-right-radius: 2em 5em;

border-bottom-right-radius: 2em 5em;

border-bottom-left-radius: 2em 5em; */


#example2 {

 border-radius: 2em 1em 4em / 0.5em 3em;

}

/* is equivalent to:

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em; */

Try it Yourself »


Related Pages

CSS tutorial: CSS Rounded Corners

HTML DOM reference: borderRadius property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-right Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the style of the right border for different elements:

h1 {

 border-right: 5px solid red;

}


h2 {

  border-right: 4px dotted blue;

}


div {

  border-right: double;

}

Try it Yourself »


Definition and Usage

The border-right property is a shorthand property for (in the following order):

  • border-right-width
  • border-right-style (required)
  • border-right-color

If border-right-color is omitted, the color applied will be the color of the text.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderRight="5px dotted blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-right 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-right: border-width border-style border-color|initial|inherit;

Property Values

Value Description
border-right-width Required. Specifies the width of the right border. Default value is "medium"
border-right-style Required. Specifies the style of the right border. Default value is "none"
border-right-color Optional. Specifies the color of the right border. Default value is the color of the text
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderRight property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-right-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a color for the right border:

div {border-right-color: coral;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-right-color property sets the color of an element's right border.

Note: Always declare the border-style or the border-right-style property before the border-right-color property. An element must have a border before you can change the color.

Default value: black
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderRightColor="blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-right-color 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-right-color: color|transparent|initial|inherit;

Property Values

Value Description Play it
color Specifies the color of the right border. Look at CSS Color Values for a complete list of possible color values. Default color is black Play it »
transparent Specifies that the border color should be transparent Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set a color for the right border with a HEX value:

div {border-right-color: #92a8d1;}

Try it Yourself »

Example

Set a color for the right border with an RGB value:

div {border-right-color: rgb(201, 76, 76);}

Try it Yourself »

Example

Set a color for the right border with an RGBA value:

div {border-right-color: rgba(201, 76, 76, 0.3);}

Try it Yourself »

Example

Set a color for the right border with a HSL value:

div {border-right-color: hsl(89, 43%, 51%);}

Try it Yourself »

Example

Set a color for the right border with a HSLA value:

div {border-right-color: hsla(89, 43%, 51%, 0.3);}

Try it Yourself »

Example

Set a transparent right border:

div {border-right-color: transparent;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-right property

HTML DOM reference: borderRightColor property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-right-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the right border:

div {border-right-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-right-style property sets the style of an element's right border.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderRightStyle="dotted"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-right-style 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Specifies no border. This is default Play it »
hidden The same as "none", except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed right border:

div {border-right-style: dashed;}

Try it Yourself »

Example

A solid right border:

div {border-right-style: solid;}

Try it Yourself »

Example

A double right border:

div {border-right-style: double;}

Try it Yourself »

Example

Remove the right border:

div {border-right-style: none;}

Try it Yourself »

Example

A groove right border:

div {

  border-right-style: groove;

 border-right-color: coral;

 border-right-width: 7px;

}

Try it Yourself »

Example

A ridge right border:

div {

 border-right-style: ridge;

  border-right-color: coral;

  border-right-width: 7px;

}

Try it Yourself »

Example

An inset right border:

div {

 border-right-style: inset;

 border-right-color: coral;

 border-right-width: 7px;

}

Try it Yourself »

Example

An outset right border:

div {

 border-right-style: outset;

  border-right-color: coral;

  border-right-width: 7px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-right property

HTML DOM reference: borderRightStyle property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-right-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a width for the right border:

div {border-right-width: thin;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-right-width property sets the width of an element's right border.

Note: Always declare the border-style or the border-right-style property before the border-right-width property. An element must have borders before you can change the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderRightWidth="5px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-right-width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-right-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium right border. This is default Play it »
thin Specifies a thin right border Play it »
thick Specifies a thick right border Play it »
length Allows you to define the thickness of the right border. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of the right border to medium:

div {border-right-width: medium;}

Try it Yourself »

Example

Set the width of the right border to thick:

div {border-right-width: thick;}

Try it Yourself »

Example

Set the width of the right border to 1px:

div {border-right-width: 1px;}

Try it Yourself »

Example

Set the width of the right border to 15px:

div {border-right-width: 15px;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-right property

HTML DOM reference: borderRightWidth property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-spacing Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the border-spacing for a table:

#table1 {

  border-collapse: separate;

  border-spacing: 15px;

}


#table2 {

 border-collapse: separate;

 border-spacing: 15px 50px;

}

Try it Yourself »


Definition and Usage

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

Default value: 2px
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.borderSpacing="15px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-spacing 1.0 8.0 1.0 1.0 4.0


CSS Syntax

border-spacing: length|initial|inherit;

Property Values

Value Description Play it
length length Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed.
  • If one value is specified, it defines both the horizontal and vertical spacing between cells
  • If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing
Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Table

HTML DOM reference: borderSpacing property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the border:

div {border-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-style property sets the style of an element's four borders. This property can have from one to four values.

Examples:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed


  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double


  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid


  • border-style: dotted;
    • all four borders are dotted
Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderStyle="dotted double"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-style 1.0 4.0 1.0 1.0 3.5

Note: The value "hidden" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support "hidden".



CSS Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Default value. Specifies no border Play it »
hidden The same as "none", except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed border:

div {border-style: dashed;}

Try it Yourself »

Example

A solid border:

div {border-style: solid;}

Try it Yourself »

Example

A double border:

div {border-style: double;}

Try it Yourself »

Example

A groove border:

div {

 border-style: groove;

 border-color: coral;

  border-width: 7px;

}

Try it Yourself »

Example

A ridge border:

div {

  border-style: ridge;

  border-color: coral;

  border-width: 7px;

}

Try it Yourself »

Example

An inset border:

div {

 border-style: inset;

 border-color: coral;

  border-width: 7px;

}

Try it Yourself »

Example

An outset border:

div {

 border-style: outset;

 border-color: coral;

 border-width: 7px;

}

Try it Yourself »

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;}

p.two {border-style: dotted solid dashed;}

p.three {border-style: dotted solid;}

p.four {border-style: dotted;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderStyle property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the style of the top border for different elements:

h1 {

 border-top: 5px solid red;

}


h2 {

 border-top: 4px dotted blue;

}


div {

 border-top: double;

}

Try it Yourself »


Definition and Usage

The border-top shorthand property sets all the top border properties in one declaration.

The properties that can be set must be in the following order:

  • border-top-width
  • border-top-style (required)
  • border-top-color

If border-top-color is omitted, the color applied will be the color of the text.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderTop="3px dashed blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-top 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-top: border-width border-style border-color|initial|inherit;

Property Values

Value Description
border-top-width Required. Specifies the width of the top border. Default value is "medium"
border-top-style Required. Specifies the style of the top border. Default value is "none"
border-top-color Optional. Specifies the color of the top border. Default value is the color of the text
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderTop property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a color for the top border:

div {border-top-color: coral;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-top-color property sets the color of an element's top border.

Note: Always declare the border-style or the border-top-style property before the border-top-color property. An element must have a border before you can change the color.

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderTopColor="blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-top-color 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-top-color: color|transparent|initial|inherit;

Property Values

Value Description Play it
color Specifies the color of the top border. Look at CSS Color Values for a complete list of possible color values. Default color is the color of the element Play it »
transparent Specifies that the border color should be transparent Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set a color for the top border with a HEX value:

div {border-top-color: #92a8d1;}

Try it Yourself »

Example

Set a color for the top border with an RGB value:

div {border-top-color: rgb(201, 76, 76);}

Try it Yourself »

Example

Set a color for the top border with an RGBA value:

div {border-top-color: rgba(201, 76, 76, 0.3);}

Try it Yourself »

Example

Set a color for the top border with a HSL value:

div {border-top-color: hsl(89, 43%, 51%);}

Try it Yourself »

Example

Set a color for the top border with a HSLA value:

div {border-top-color: hsla(89, 43%, 51%, 0.3);}

Try it Yourself »

Example

Set a transparent top border:

div {border-top-color: transparent;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-top property

HTML DOM reference: borderTopColor property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top-left-radius Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Add rounded borders to the top-left corner of two <div> elements:

#example1 {

 border: 2px solid red;

 border-top-left-radius: 25px;

}


#example2 {

 border: 2px solid red;

 border-top-left-radius: 50px 20px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-top-left-radius property defines the radius of the top-left corner.

Tip: This property allows you to add rounded borders to elements!

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.borderTopLeftRadius="25px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-top-left-radius 5.0

4.0 -webkit-

9.0 4.0

3.0 -moz-

5.0

3.1 -webkit-

10.5


CSS Syntax

border-top-left-radius: length|% [length|%]|initial|inherit;

Note: If you set two values, the first one is for the top border, and the second one for the left border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.

Property Values

Value Description Play it
length Defines the shape of the top-left corner. Read about length units Play it »
% Defines the shape of the top-left corner in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Add rounded borders to the top-left corner in percent:

#example1 {

  border: 2px solid red;

  background: url(paper.gif);

  padding: 10px;

 border-top-left-radius: 40%;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Rounded Corners

HTML DOM reference: borderTopLeftRadius property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top-right-radius Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Add rounded borders to the top-right corner of two <div> elements:

#example1 {

 border: 2px solid red;

 border-top-right-radius: 25px;

}


#example2 {

  border: 2px solid red;

 border-top-right-radius: 50px 20px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-top-right-radius property defines the radius of the top-right corner.

Tip: This property allow you to add rounded borders to elements!

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.borderTopRightRadius="25px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-top-right-radius 5.0

4.0 -webkit-

9.0 4.0

3.0 -moz-

5.0

3.1 -webkit-

10.5


CSS Syntax

border-top-right-radius: length|% [length|%]|initial|inherit;

Note: If you set two values, the first one is for the top border, and the second one for the right border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.

Property Values

Value Description Play it
length Defines the shape of the top-right corner. Read about length units Play it »
% Defines the shape of the top-right corner in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Add rounded borders to the top-right corner in percent:

#example1 {

  border: 2px solid red;

 background: url(paper.gif);

 padding: 10px;

 border-top-right-radius: 40%;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Rounded Corners

HTML DOM reference: borderTopRightRadius property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the top border:

div {border-top-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-top-style property sets the style of an element's top border.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderTopStyle="dashed"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-top-style 1.0 5.5 1.0 1.0 9.2


CSS Syntax

border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Specifies no border. This is default Play it »
hidden The same as "none", except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed top border:

div {border-top-style: dashed;}

Try it Yourself »

Example

A solid top border:

div {border-top-style: solid;}

Try it Yourself »

Example

A double top border:

div {border-top-style: double;}

Try it Yourself »

Example

Remove the top border:

div {border-top-style: none;}

Try it Yourself »

Example

A groove top border:

div {

 border-top-style: groove;

  border-top-color: coral;

  border-top-width: 7px;

}

Try it Yourself »

Example

A ridge top border:

div {

  border-top-style: ridge;

  border-top-color: coral;

  border-top-width: 7px;

}

Try it Yourself »

Example

An inset top border:

div {

 border-top-style: inset;

  border-top-color: coral;

  border-top-width: 7px;

}

Try it Yourself »

Example

An outset top border:

div {

  border-top-style: outset;

  border-top-color: coral;

 border-top-width: 7px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-top property

HTML DOM reference: borderTopStyle property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-top-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a width for the top border:

div {border-top-width: thin;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-top-width property sets the width of an element's top border.

Note: Always declare the border-style or the border-top-style property before the border-top-width property. An element must have borders before you can change the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderTopWidth="5px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-top-width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-top-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium top border. This is default Play it »
thin Specifies a thin top border Play it »
thick Specifies a thick top border Play it »
length Allows you to define the thickness of the top border. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of the top border to medium:

div {border-top-width: medium;}

Try it Yourself »

Example

Set the width of the top border to thick:

div {border-top-width: thick;}

Try it Yourself »

Example

Set the width of the top border to 1px:

div {border-top-width: 1px;}

Try it Yourself »

Example

Set the width of the top border to 15px:

div {border-top-width: 15px;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

CSS reference: border-top property

HTML DOM reference: borderTopWidth property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS border-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a width for the borders:

div {border-width: thin;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-width property sets the width of an element's four borders. This property can have from one to four values.

Examples:

  • border-width: thin medium thick 10px;
    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px


  • border-width: thin medium thick;
    • top border is thin
    • right and left borders are medium
    • bottom border is thick


  • border-width: thin medium;
    • top and bottom borders are thin
    • right and left borders are medium


  • border-width: thin;
    • all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.borderWidth="1px 5px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium border. This is default Play it »
thin Specifies a thin border Play it »
thick Specifies a thick border Play it »
length Allows you to define the thickness of the border. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of the borders to medium:

div {border-width: medium;}

Try it Yourself »

Example

Set the width of the borders to thick:

div {border-width: thick;}

Try it Yourself »

Example

Set the width of the borders to 1px:

div {border-width: 1px;}

Try it Yourself »

Example

Set the width of the borders to 15px:

div {border-width: 15px;}

Try it Yourself »

Example

Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

div {border-width: 10px 1px;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderWidth property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS bottom Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the bottom edge of the <div> element to 10px above the bottom edge of its nearest parent element with some positioning:

div.absolute {

  position: absolute;

  bottom: 10px;

  width: 50%;

  border: 3px solid #8AC007;

}

Try it Yourself »


Definition and Usage

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
  • If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
  • If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position: static; - the bottom property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.bottom="10px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
bottom 1.0 5.0 1.0 1.0 6.0


CSS Syntax

bottom: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Lets the browser calculate the bottom edge position. This is default Play it »
length Sets the bottom edge position in px, cm, etc. Negative values are allowed. Read about length units Play it »
% Sets the bottom edge position in % of containing element. Negative values are allowed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Positioning

CSS reference: top property

CSS reference: left property

CSS reference: right property

HTML DOM reference: bottom property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS box-decoration-break Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the box-decoration-break property:

span.ex1 {

 -webkit-box-decoration-break: clone;

 -o-box-decoration-break: clone;

  box-decoration-break: clone;

}


span.ex2 {

 -webkit-box-decoration-break: slice;

 -o-box-decoration-break: slice;

 box-decoration-break: slice;

}

Try it Yourself »


Definition and Usage

The box-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.

Default value: slice
Inherited: no
Animatable: no. Read about animatable
Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
box-decoration-break 22.0 -webkit- Not supported 32.0 6.1 -webkit- 11.5 -webkit-


CSS Syntax

box-decoration-break: slice|clone|initial|inherit|unset;

Property Values

Value Description
slice Default. Box decorations are applied to the element as a whole and break at the edges of the element fragments
clone Box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS box-shadow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Add shadows to different <div> elements:

#example1 {

  box-shadow: 5px 10px;

}


#example2 {

 box-shadow: 5px 10px #888888;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The box-shadow property attaches one or more shadows to an element.

Default value: none
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.boxShadow="10px 20px 30px blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-shadow 10.0

4.0 -webkit-

9.0 4.0

3.5 -moz-

5.1

3.1 -webkit-

10.5


CSS Syntax

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Note: To attach more than one shadow to an element, add a comma-separated list of shadows (see "Try it Yourself" example below).

Property Values

Value Description Play it
none Default value. No shadow is displayed Play it »
h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box Play it »
v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Play it »
blur Optional. The blur radius. The higher the number, the more blurred the shadow will be Play it »
spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow Play it »
color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.


Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.

Play it »
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Tip: Read more about allowed values (CSS length units)


More Examples

Example

Add a blur effect to the shadow:

#example1 {

  box-shadow: 10px 10px 8px #888888;

}

Try it Yourself »

Example

Define the spread radius of the shadow:

#example1 {

  box-shadow: 10px 10px 8px 10px #888888;

}

Try it Yourself »

Example

Define multiple shadows:

#example1 {

  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

}

Try it Yourself »

Example

Add the inset keyword:

#example1 {

  box-shadow: 5px 10px inset;

}

Try it Yourself »

Example

Images thrown on the table. This example demonstrates how to create "polaroid" pictures and rotate the pictures:

div.polaroid {

 width: 284px;

  padding: 10px 10px 20px 10px;

  border: 1px solid #BFBFBF;

  background-color: white;

 box-shadow: 10px 10px 5px #aaaaaa;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Rounded Corners

HTML DOM reference: boxShadow property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS box-sizing Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Include padding and border in the element's total width and height:

#example1 {

 box-sizing: border-box;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

Default value: content-box
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.boxSizing="border-box"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-sizing 10.0

4.0 -webkit-

8.0 29.0

2.0 -moz-

5.1

3.2 -webkit-

9.5


CSS Syntax

box-sizing: content-box|border-box|initial|inherit;

Property Values

Value Description
content-box Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
border-box The width and height properties (and min/max properties) includes content, padding and border
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify two bordered boxes side by side:

div {

 box-sizing: border-box;

 width: 50%;

 border: 5px solid red;

  float: left;

}

Try it Yourself »

Example

Set the "universal box-sizing":

* {

 box-sizing: border-box;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Box Sizing

HTML DOM reference: boxSizing property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS break-after Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Always insert a page-break after a <footer> element:

@media print {

  footer {

   break-after: always;

 }

}


Definition and Usage

The break-after property specifies whether or not a page break, column break, or region break should occur after the specified element.

The break-after property extends the CSS2 page-break-after property.

Using break-after, you can tell the browser to break the page, column, or region after the element the break-after property is applied to, or avoid the element to be split and span across two pages.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.breakAfter="always"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
break-after 50.0 10.0 65.0 10.0 37.0


CSS Syntax

break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property Values

Value Description
auto Default. Automatic page/column/region break after the element
all Always insert a page-break right after the principal box
always Always insert a page-break after the element
avoid Avoid a page/column/region break after the element
avoid-column Avoid a column-break after the element
avoid-page Avoid a page-break after the element
avoid-region Avoid a region-break after the element
column Always insert a column-break after the element
left Insert one or two page-breaks after the element so that the next page is formatted as a left page
page Always insert a page-break after the element
recto Insert one or two page-breaks after the principal box so that the next page is formatted as a recto page
region Always insert a region-break after the element
right Insert one or two page-breaks after the element so that the next page is formatted as a right page
verso Insert one or two page-breaks after the principal box so that the next page is formatted as a verso page
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Always insert a page-break after element with id "toc" (table of content):

@media print {

  #toc {

   break-after: always;

 }

}

Example

Always insert a region-break after <ul> elements in a region:

.region ul {

   break-after: region;

 }

}


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS break-before Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Always insert a page-break before a <h1> element:

@media print {

  h1 {

   break-before: always;

 }

}


Definition and Usage

The break-before property specifies whether or not a page break, column break, or region break should occur before the specified element.

The break-before property extends the CSS2 page-break-before property.

Using break-before, you can tell the browser to break the page, column, or region before the element the break-before property is applied to, or avoid the element to be split and span across two pages.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.breakBefore="always"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
break-before 50.0 10.0 65.0 10.0 37.0


CSS Syntax

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property Values

Value Description
auto Default. Automatic page/column/region break before the element
all Always insert a page-break right before the principal box
always Always insert a page-break before the element
avoid Avoid a page/column/region break before the element
avoid-column Avoid a column-break before the element
avoid-page Avoid a page-break before the element
avoid-region Avoid a region-break before the element
column Always insert a column-break before the element
left Insert one or two page-breaks before the element so that the next page is formatted as a left page
page Always insert a page-break before the element
recto Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page
region Always insert a region-break before the element
right Insert one or two page-breaks before the element so that the next page is formatted as a right page
verso Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

To assure that all new chapters should start on a right page (like in a book) when printed, you can use break-before: right for all <h1> elements:

@media print {

  h1 {

   break-before: right;

 }

}

Example

Always insert a region-break before <ul> elements in a region:

.region ul {

   break-before: region;

 }

}


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS break-inside Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Avoid a page-break inside an <img> element:

@media print {

  img {

   display: block;

   break-inside: avoid;

 }

}


Definition and Usage

The break-inside property specifies whether or not a page break, column break, or region break should occur inside the specified element.

The break-inside property extends then CSS2 page-break-inside property.

With break-inside, you can tell the browser to avoid breaks inside images, code snippets, tables, and listst.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.breakInside="always"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
break-inside 50.0 10.0 65.0 10.0 37.0


CSS Syntax

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property Values

Value Description
auto Default. Automatic page/column/region break inside the element
avoid Avoid a page/column/region break inside the element
avoid-column Avoid a column-break inside the element
avoid-page Avoid a page-break inside the element
avoid-region Avoid a region-break inside the element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Avoid a page-break inside a <table>, <ul>, <ol> elements::

@media print {

  table, ul, ol {

   break-inside: avoid;

 }

}


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS caption-side Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the placement of table captions:

#example1 {

  caption-side: bottom;

}


#example2 {

  caption-side: top;

}

Try it Yourself »


Definition and Usage

The caption-side property specifies the placement of a table caption.

Default value: top
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.captionSide="bottom"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
caption-side 1.0 8.0 1.0 1.0 4.0


CSS Syntax

caption-side: top|bottom|initial|inherit;

Property Values

Value Description Play it
top Puts the caption above the table. This is default Play it »
bottom Puts the caption below the table Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Table

HTML DOM reference: captionSide property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS caret-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the color of the cursor in input elements:

input {

 caret-color: red;

}

Try it Yourself »


Definition and Usage

The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

Default value: auto
Inherited: yes
Animatable: Read about animatable
Version: CSS3
JavaScript syntax: object.style.caretColor="red"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
caret-color 57.0 Not supported 53.0 11.1 44.0


CSS Syntax

caret-color: auto|color;

Property Values

Value Description
auto Default. Browsers uses the currentColor for the caret
color Specifies a color to use for the caret. All legal color values can be used (rgb, hex, named-color, etc). For more information on legal values, read our CSS Colors Tutorial


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS @charset Rule

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the encoding of the style sheet to Unicode UTF-8:

@charset "UTF-8";


Definition and Usage

The @charset rule specifies the character encoding used in the style sheet.

The @charset rule must be the first element in the style sheet and not be preceded by any character. If several @charset rules are defined, only the first one is used. The @charset rule cannot be used inside a style attribute (on an HTML element), or inside the <style> element where the character set of the HTML page is relevant.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
@charset 2.0 12.0 1.5 4.0 9.0


CSS Syntax

@charset "charset";

Property Values

Value Description
charset Specifies the character encoding to use


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS clear Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Do not allow floating elements on the left or the right side of a specified <p> element:

img {

 float: left;

}


p.clear {

 clear: both;

}

Try it Yourself »


Definition and Usage

The clear property specifies on which sides of an element floating elements are not allowed to float.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.clear="both"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
clear 1.0 5.0 1.0 1.0 6.0


CSS Syntax

clear: none|left|right|both|initial|inherit;

Property Values

Value Description
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Float

HTML DOM reference: clear property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS clip Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Clip an image:

img {

 position: absolute;

 clip: rect(0px,60px,200px,0px);

}

Try it Yourself »


Definition and Usage

What happens if an image is larger than its containing element?

The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

Note: The clip property does not work if "overflow:visible".

Note: The clip property is deprecated and will be replaced by the clip-path property in the future.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.clip="rect(0px,50px,50px,0px)"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
clip 1.0 8.0 1.0 1.0 7.0


CSS Syntax

clip: auto|shape|initial|inherit;

Property Values

Value Description Play it
auto No clipping will be applied. This is default Play it »
shape Clips an element. The only valid value is: rect (top, right, bottom, left) Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: clip property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS clip-path Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Clip an image to a 50% circle:

img {

 clip-path: circle(50%);

}

Try it Yourself »


Definition and Usage

The clip-path property lets you clip an element to a basic shape or to an SVG source.

Note: The clip-path property will replace the deprecated clip property.

Default value: none
Inherited: no
Animatable: yes for basic-shape. Read about animatableTry it
Version: CSS Masking Module Level 1
JavaScript syntax: object.style.clipPath="circle(50%)"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
clip-path 55.0

23.0 -webkit-

12.0* 54.0 9.1

6.1 -webkit-

42.0

15.0 -webkit-

* Edge only supports clip-path on SVG elements (not HTML elements).



CSS Syntax

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Property Values

Value Description Play it
clip-source Defines a URL to an SVG <clipPath> element
basic-shape Clips an element to a basic shape: circle, ellipse, polygon or inset Play it »
margin-box Uses the margin box as the reference box
border-box Uses the border box as the reference box
padding-box Uses the padding box as the reference box
content-box Uses the content box as the reference box
fill-box Uses the object bounding box as reference box
stroke-box Uses the stroke bounding box as reference box
view-box Uses the SVG viewport as reference box
none This is default. No clipping is done


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the text-color for different elements:

body {

 color: red;

}


h1 {

  color: #00ff00;

}


p.ex {

  color: rgb(0,0,255);

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The color property specifies the color of text.

Tip: Use a background color combined with a text color that makes the text easy to read.

Default value: not specified
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.color="#0000FF"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
color 1.0 3.0 1.0 1.0 3.5


CSS Syntax

color: color|initial|inherit;

Property Values

Value Description Play it
color Specifies the text color. Look at CSS Color Values for a complete list of possible color values. Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the text color with a HEX value:

body {color: #92a8d1;}

Try it Yourself »

Example

Set the text color with an RGB value:

body {color: rgb(201, 76, 76);}

Try it Yourself »

Example

Set the text color with an RGBA value:

body {color: rgba(201, 76, 76, 0.6);}

Try it Yourself »

Example

Set the text color with a HSL value:

body {color: hsl(89, 43%, 51%);}

Try it Yourself »

Example

Set the text color with a HSLA value:

body {color: hsla(89, 43%, 51%, 0.6);}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: color property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-count Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Divide the text in the <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-count property specifies the number of columns an element should be divided into.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnCount=3Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-count 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-count: number|auto|initial|inherit;

Property Values

Value Description Play it
number The optimal number of columns into which the content of the element will be flowed Play it »
auto Default value. The number of columns will be determined by other properties, like e.g. "column-width" Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnCount property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-fill Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify how to fill columns:

.newspaper1 {

  column-fill: auto;

}


.newspaper2 {

  column-fill: balance;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-fill property specifies how to fill columns, balanced or not.

Tip: If you add a height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.

Default value: balance
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.columnFill="auto"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -moz- specify the first version that worked with a prefix.

Property
column-fill 50.0 10.0 52.0

13.0 -moz-

10.0

7.0 -webkit-

37.0


CSS Syntax

column-fill: balance|auto|initial|inherit;

Property Values

Value Description
balance Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally)
auto Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnFill property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-gap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-gap property specifies the gap between the columns.

Note: If there is a column-rule between columns, it will appear in the middle of the gap.

Default value: normal
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnGap="50px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-gap 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-gap: length|normal|initial|inherit;

Property Values

Value Description Play it
length A specified length that will set the gap between the columns Play it »
normal Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

 column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnGap property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-rule Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the width, style, and color of the rule between columns:

div {

 column-rule: 4px double #ff00ff;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-rule property sets the width, style, and color of the rule between columns.

This property is a shorthand property for:

  • column-rule-width
  • column-rule-style (required)
  • column-rule-color

If column-rule-color is omitted, the color applied will be the color of the text.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnRule="3px outset blue"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

Property Values

Value Description
column-rule-width Sets the width of the rule between columns. Default value is medium
column-rule-style Sets the style of the rule between columns. Default value is none
column-rule-color Sets the color of the rule between columns. Default value is the color of the element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

 column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnRule property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-rule-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the color of the rule between columns:

div {

 column-rule-color: #ff0000;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-rule-color property specifies the color of the rule between columns.

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnRuleColor="#0000ff"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule-color 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-rule-color: color|initial|inherit;

Property Values

Value Description Play it
color Specifies the color of the rule. Look at CSS Color Values for a complete list of possible color values Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

 column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnRuleColor property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-rule-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the style of the rule between columns:

div {

  column-rule-style: dotted;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-rule-style property specifies the style of the rule between columns.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.columnRuleStyle="dotted"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule-style 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Default value. Defines no rule Play it »
hidden Defines a hidden rule Play it »
dotted Defines a dotted rule Play it »
dashed Defines a dashed rule Play it »
solid Defines a solid rule Play it »
double Defines a double rule Play it »
groove Specifies a 3D grooved rule. The effect depends on the width and color values Play it »
ridge Specifies a 3D ridged rule. The effect depends on the width and color values Play it »
inset Specifies a 3D inset rule. The effect depends on the width and color values Play it »
outset Specifies a 3D outset rule. The effect depends on the width and color values Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnRuleStyle property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-rule-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the width of the rule between columns:

div {

 column-rule-width: 10px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-rule-width property specifies the width of the rule between columns.

Default value: medium
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnRuleWidth="10px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule-width 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit

11.1



CSS Syntax

column-rule-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Default value. Defines a medium rule Play it »
thin Defines a thin rule Play it »
thick Defines a thick rule Play it »
length Specifies the width of the rule Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

 column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px outset #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnRuleWidth property


❮ PreviousComplete CSS ReferenceNext ❯

////////////////////////////////////////


CSS column-span Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let the <h2> element span across all columns:

h2 {

  column-span: all;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-span property specifies how many columns an element should span across.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.columnSpan="all"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
column-span 50.0

4.0 -webkit-

10.0 71.0 9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1



CSS Syntax

column-span: none|all|initial|inherit;

Property Values

Value Description Play it
none Default value. The element should span across one column Play it »
all The element should span across all columns Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

 column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

  column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnSpan property


❮ PreviousComplete CSS ReferenceNext ❯