CSS Border-width

border-width

The border-width shorthand property sets all of the border widths in one declaration. This property can accept from one to four values.

If all four values are provided, the border widths are as specified.

If three values are provided, right and left border widths are set as middle value.

If two values are provided, top and bottom border widths are set as the first value, right and left border widths are set as second value.

If one value is provided, all four border width values are set the same.

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

Property Values

Value Description
thin Sets a thin border
medium (default) Sets a medium border
thick Sets a thick border
length Sets the thickness of the border
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

This example sets the width of all four borders.

The Following is the result of the above example:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

border-top-width

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

READ  Debugging PhoneGap Applications

This property has the following syntax:

Note: Always declare the border-style property before the border-top-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

The Following is the result of the above example:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-right-width

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

This property has the following syntax:

Note: Always declare the border-style property before the border-right-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

The Following is the result of the above example:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-bottom-width

The border-bottom-width property sets the width of an element’s bottom border.

This property has the following syntax:

Note: Always declare the border-style property before the border-bottom-width property. An element must have borders before the width can be changed.

READ  A Writer’s Dream Things: The Coolest Gifts for Writers

Examples

This example sets the width of all four borders.

The Following is the result of the above example:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-left-width

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

This property has the following syntax:

Note: Always declare the border-style property before the border-left-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

The Following is the result of the above example:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Leave a Reply

Your email address will not be published. Required fields are marked *