1. Technology

Borders - Learn How to Dress up the Edges of Your Elements

Using CSS to Create Borders on Elements

By

Borders on elements used to just be wide or narrow, colored or black. But now, with CSS you can dress up your borders to create new and interesting effects on nearly any box element you create. This means that if you need to create a solid red bar on the right of a box or a dashed brown border around the top and bottom, you can. And you'll find that it's easy.

Border Basics

When creating a border around a box element, you need to know three things:

  1. the width of the border
  2. the style of the border
  3. the color of the border

Border Widths: The width of the border is the amount of space on the page that the border will take up. This is in addition to any padding or margin you have set on the element, so be sure to take this into account if you're creating a pixel perfect layout. Border widths are most often defined in pixels, e.g. 5px, but you can also define them in ems, percentages, or any other size measurement.

Border Style: The border style is the way the border will look. The default is solid, but there are several other styles you can choose from:

  • none - used primarily with DHTML to make the border appear and disappear
  • dotted - a dotted line above the background of the object
  • dashed - a dashed line above the background of the object
  • double - a double line above the background of the object; Note that the width of the border is equal to the width of the two lines plus the space between them
  • groove - a 3D groove is drawn based on the colors set in the border-color property
  • ridge - a 3D ridge is drawn based on the colors set in the border-color property
  • inset - creates an inset border similar to a button in the colors set in the border-color property
  • outset - creates an outset border similar to a button in the colors set in the border-color property
  • hidden - acts like "none" except in cases of tables where the border might need to display on one side of a cell and not another

Border Colors: As with any other Web color, you should define your border color so that it both matches your design and displays well on most Web pages. I typically use browser safe colors written in hexadecimal. But you can also use named colors.

Once you know what you want your border to look like, simply add the CSS tag to your box element:
<div style="border: 10px dashed #000;">...</div>

Putting Borders to Work

But there's more to borders than just surrounding your boxes with, well, boxes. With the other border properties you can set borders to just display on specific sides, or make different borders for different sides of your box.

  • border-top
  • border-bottom
  • border-right
  • border-left

Add the details about the borders in the same order as the border property:
<div style="border-right: 5px double #0ff;">...</div>

See some sample borders in action to get an idea of what you can do with the border property and a little CSS. It's easier than you think.

©2014 About.com. All rights reserved.