Friday, November 27, 2009

How to style borders?


How to style bordes?
Often while editing you template you must have come across something like border: 1px solid #333333. What this means is "make a border 1 pixel wide, with solid line, and color of line is #333333. In this tutorial we will tell what styles you can apply to the borders and how to increase the line width. Finally we will also tell about outlines.









Increase the border width
To increase the border width just increment the pixel value. For e.g. to make a border 2 pixel wide
border: 2px solid #333333;
The higher the pixel value the wider the border. border: 5px solid #333333 will have five times wider border than border: 1px solid #333333.

Change the border style
Following are the styles available for border.

  1. border:3px solid #b90000;
  2. border:3px double #b90000;
  3. border:3px inset #b90000;
  4. border:3px dotted #b90000;
  5. border:3px groove #b90000;
  6. border:3px outset #b90000;
  7. border:3px dashed #b90000;
  8. border:3px ridge #b90000;

Outlines
In addition to borders you can also have outlines. Here is an e.g. of outline.

outline:#b90000 dotted 3px;

Confused, do they look same. Here is another e.g. to show the difference.

border:3px solid #333; outline:#b90000 dotted 3px;

The inner gray line designates border, while the outer red line is the outline.

2 comments:

  1. Nice tutorial! Good to see all these line types.

    ReplyDelete
  2. "There is an answer of no borders but the problem is or are do not tell to group that there are responsibilities which need to give support of no tension of any order to fulfill.".

    ReplyDelete

Older post Home
 

Recent Posts

| © 2009 BloggerFunda.blogspot.com | Template by Blogger | Enhanced By Abhishek Kumar |
| Site best viewed in Firefox@1024X768 or higher resolution. |