Much like margin and padding, border can be defined for the top, right, bottom and left sides individually or define for the entire element at the same time.
Border SyntaxBorder syntax can sometime be quite for both, as you can specify width, style and color for each individual side. Now because of these authors typically use border shorthand notation that allows you to set all three border properties at the same time.
border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black;
border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; border: 1px solid black;
Border WidthThe important thing to remember about the borders is that they do affect the overall width of an element. Border width begins from the edge of padding width and then extend outward. It's easy to forget about 1px border on an element but this is often a culprit in breaking layouts or causing elements to shift unexpectedly. So when authorizing CSS be sure to account border widths when planning a layout. Border width are pretty explanatory but border style and border color require a closer look.
Border StyleBorder Style can be set in one of ten values
none and hidden are very similar when tables come into play when there are certain differences regarding when borders are drawn on tables cells.
Solid, dotted and dashed, create a single flat line, that's either solid broken into dots or broken into dashes. All those supports for border styles are almost complete in browsers. Some older browsers don't support the dotted value resulting in dash lines when found.
The remaining values create dimensional line effect that often requires width values greater than one.
Border ColorThe border color property allows you to define the color of the border independently of the color of the elements foreground and background. While most border style properties will display the color specify a few of the 3D like values will actually use the color as a highlight value or not at all depends upon browser implementation.
Border UsuageMost designers use borders for declarative affects or as way of providing visual separation between elements.
Borders can also be used as a way of creating text rules between blocks of text and a way of replacing the default underlines underlinked text.
Border Image PropertyRelative new addition to borders is the border image property. This allows you to specify an image that will be sliced and then aligned with the element corners and repeated and stretched in the middle section.
The syntax is too much to cover in the general overview and browser support is just now starting to solidify but this is definitely a technique that should be on your radar as a designer. before we move on i also wanna take a moment to discussed the deference between border and outline.
Difference between Border and Outline
- The outline property has been a part of CSS since the 2.0 specifications but it is only very rarely discussed in tutorials. One of the reasons for this is that unlike borders the outlines can only be set on the entire element and not the individual sides, like the border can. You can however set width, style and color just like border property.
- Another intriguing difference is between borders and outlines is that the outline does not add to the total width of an element. This is a rather odd behavior, means that outlines will often overlap other elements when they come in contact with them however outlines can be set on element without breaking layouts or causing other elements to shift. Making them valuable in those situations.
- The biggest reason for author ignoring the outline property however is its lack of broad support among browsers. Safari, Opera and Chrome have supported for some time but Firefox support is still a little bit buggy and IE has only recently supported it.