By drupalhero |
Drupal8 W3CSS Theme - Border Classes

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