Become Wordpress Professional - Your Ultimate Wordpress Guide

Tuesday, 19 March 2013

Concept of Borders in CSS

Border defines the outside edge of elements and are usually used to apply declarative effect to specific elements. Elements borders are usually defined by three properties.
  • border-style:
  • border-width:
  • border-color:

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 Syntax

Border 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.
Individual Properties
 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;

Shorthand Notation
 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 Width

The 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 Style

Border Style can be set in one of ten values
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • offset

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 Color

The 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 Usuage

Most 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 Property

Relative 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

  1. 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.
  2. 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.
  3. 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.
Still it's worth mentioning because it gives you the alternative for using the border property.


Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.