CSS Border
The CSS border properties define the borders around an
element.
Examples
All the border properties in one
declaration
This example demonstrates a shorthand property for setting all of the properties
for the four borders in one declaration, can have from one to three values.
Set different borders on
each side
This example demonstrates how to set different borders on each side of the
element.
All the top border properties
in one declaration
This example demonstrates a shorthand property for setting all of the properties for the
top border in one declaration.
All the bottom border
properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the
bottom border in one declaration.
All the left border
properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the
left border in one declaration.
All the right border
properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the
right border in one declaration.
Set the style of the four
borders
This example demonstrates how to set the style of the four borders.
Set the
style of the top border
This example demonstrates how to set the style of the top border.
Set
the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the
style of the left border
This example demonstrates how to set the style of the left border.
Set
the style of the right border
This example demonstrates how to set the style of the right border.
All the width of the border
properties in one declaration
This example demonstrates a shorthand property for setting the width of the four
borders in one declaration, can have from one to four values.
Set the width of the top
border
This example demonstrates how to set the width of the top border.
Set the width of the
bottom border
This example demonstrates how to set the width of the bottom border.
Set the width of the
left border
This example demonstrates how to set the width of the left border.
Set the width of the
right border
This example demonstrates how to set the width of the right border.
Set the color of the four
borders
This example demonstrates how to set the color of the four borders. It can have
from one to four colors.
Set the
color of the top border
This example demonstrates how to set the color of the top border.
Set
the color of the bottom border
This example demonstrates how to set the color of the bottom border.
Set the
color of the left border
This example demonstrates how to set the color of the left border.
Set
the color of the right border
This example demonstrates how to set the color of the right border.
CSS Border Properties
The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around
a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).
| Property |
Description |
Values |
IE |
F |
N |
W3C |
| border |
A shorthand property for setting all of the properties for the four borders in one declaration |
border-width
border-style
border-color |
4 |
1 |
4 |
1 |
| border-bottom |
A shorthand property for setting all of the properties for the bottom
border in one declaration |
border-bottom-width
border-style
border-color |
4 |
1 |
6 |
1 |
| border-bottom-color |
Sets the color of the bottom border |
border-color |
4 |
1 |
6 |
2 |
| border-bottom-style |
Sets the style of the bottom border |
border-style |
4 |
1 |
6 |
2 |
| border-bottom-width |
Sets the width of the bottom border |
thin
medium
thick
length |
4 |
1 |
4 |
1 |
| border-color |
Sets the color of the four borders, can have from one to four colors |
color |
4 |
1 |
6 |
1 |
| border-left |
A shorthand property for setting all of the properties for the left
border in one declaration |
border-left-width
border-style
border-color |
4 |
1 |
6 |
1 |
| border-left-color |
Sets the color of the left border |
border-color |
4 |
1 |
6 |
2 |
| border-left-style |
Sets the style of the left border |
border-style |
4 |
1 |
6 |
2 |
| border-left-width |
Sets the width of the left border |
thin
medium
thick
length |
4 |
1 |
4 |
1 |
| border-right |
A shorthand property for setting all of the properties for the right
border in one declaration |
border-right-width
border-style
border-color |
4 |
1 |
6 |
1 |
| border-right-color |
Sets the color of the right border |
border-color |
4 |
1 |
6 |
2 |
| border-right-style |
Sets the style of the right border |
border-style |
4 |
1 |
6 |
2 |
| border-right-width |
Sets the width of the right border |
thin
medium
thick
length |
4 |
1 |
4 |
1 |
| border-style |
Sets the style of the four borders, can have from one to four styles |
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset |
4 |
1 |
6 |
1 |
| border-top |
A shorthand property for setting all of the properties for the top border in one declaration |
border-top-width
border-style
border-color |
4 |
1 |
6 |
1 |
| border-top-color |
Sets the color of the top border |
border-color |
4 |
1 |
6 |
2 |
| border-top-style |
Sets the style of the top border |
border-style |
4 |
1 |
6 |
2 |
| border-top-width |
Sets the width of the top border |
thin
medium
thick
length |
4 |
1 |
4 |
1 |
| border-width |
A shorthand property for setting the width of the
four borders in one declaration, can have from one to four values |
thin
medium
thick
length |
4 |
1 |
4 |
1 |
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |

|
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |

|
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |

|
Promote collaboration among coworkers in your organization through project workspaces where others can efficiently find information and work together |

|
Personalize your company profile by bookmarking and organizing favorite content, uploading assets, posting photos, blogging, and more |

|
Interact with features like tagging, flagging, wikis and ratings found in the Web 2.0 Toolbox |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide. Request an
INSTANT DEMO or download a
FREE TRIAL today. |
|