w3pop.com :: ÍøÂçѧԺ :: CSS :: CSS ±ß¿ò
The CSS border properties define the borders around an element.
CSS±ß¿òÊôÐÔÓÃÀ´¶¨Òå»·ÈÆÔªËØµÄ±ß¿ò£¨Ñùʽ£©
Set the style of the four borders
This example demonstrates how to set the style of the four borders.
ÉèÖÃËĸö±ß¿òµÄÑùʽ
Set different borders on each side
This example demonstrates how to set different borders on each side of the element.
·Ö±ðÉèÖÃÿ¸ö±ß¿ò
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 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 width of the top border
This example demonstrates how to set the width of the top border.
ÉèÖö¥²¿±ß¿ò¿í¶È
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.
ÔÚÒ»´ÎÉùÃ÷ºóÉèÖÃÓұ߿òËùÓеÄÊôÐÔ
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 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.
ÔÚÒ»´ÎÉùÃ÷ºóÉèÖÃËùÓб߿ò¿í¶ÈµÄÊôÐÔ
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.
ÔÚÒ»´ÎÉùÃ÷ºóÉèÖÃËùÓб߿òËùÓеÄÊôÐÔ
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.
CSS±ß¿òÊôÐÔ¿ÉÒÔÈÃÄãÖ¸¶¨ÔªËر߿òµÄÑùʽºÍÑÕÉ«¡£HTMLÖÐÎÒÃÇ¿ÉÒÔÓñí¸ñÀ´½¨Á¢ÎÄ×ֵı߿ò£¬µ«Ê¹ÓÃCSS±ß¿òÊôÐÔÄÜÈÃÎÒÃǽ¨Á¢¸üºÃ¿´µÄЧ¹û¶øÇÒËü¿ÉÒÔÖ§³ÖÈκÎÔªËØ¡£
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
ä¯ÀÀÆ÷Ö§³Ö£º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).
W3C£ºÀïÃæµÄÊý×Ö´ú±íCSS°æ±¾ºÅ
| 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 |