The border property allows you to set a rule (line) around all four sides of your box in any color and thickness using a variety of line styles. Also, using additional border properties, you can independently set the borders on any of the four sides, giving you amazing design versatility. To set the border: 1. To set the border on all four sides, type the border property name in the CSS declaration block, followed by a colon (:) border: 2. Type a border-width value, followed by a space. 6px This value can be one of the following A length value; a value of 0 prevents the border from appearing, even if the style and color are set. A relative-size keyword, such as thin, medium, or thick inherit will cause the element to use the same border styles as its parent element. 3. Type the name of the style you want to assign to your border. double shows a complete list of available border styles. Alternatively, you can type none, which prevents the border from appearing. 4. Type a color value, which is the color you want the border to be as defined in rgb(142, 137, 129); This can be the name of the color or an RGB value. 5. You aren’t stuck using the same border on all four sides. You can set each side (border-top, border-bottom, border left, and/or border-right). border-top: 2px solid ➝ rgb(142, 137, 129);
| Border Classes | |
|---|---|
| Class | Defines |
| w3-border | Borders (top, right, bottom, left) |
| w3-border-top | Border top |
| w3-border-right | Border right |
| w3-border-bottom | Border bottom |
| w3-border-left | Border left |
| w3-border-0 | Removes all borders |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) |
| w3-bottombar | Adds a thick bottom border (bar) to an element |
| w3-leftbar | Adds a thick left border (bar) to an element |
| w3-rightbar | Adds a thick right border (bar) to an element |
| w3-topbar | Adds a thick top border (bar) to an element |
| w3-hover-border-color | Hoverable border color |