Featured Tutorials

web design articles, html, css, php, asp, include function,include in php,include in asp,including files,html include,asp include,php include,how to design websites,websites tutorial Building your website with includes

Building your website with includes

Using server side includes to design and code your web site allows you to keep your develo..

where to submit,tutorial sites,articles,directories,submission,site promotion, submit artilcles,photoshop tutorial sites,flash tutorial sites,promote tutorials,best tutorial sites Build Traffic Mountains, great places to submit your Tutorials and Articles

Build Traffic Mountains, great places to submit your Tutorials and Articles

A list of great sites to submit your tutorials and articles that actually bring traffic to..

google adsense,adsense tips,problogger,$100,000 adsense,six figure adsense,how to make money with adsense,making money with adsense,adsense earners,adsense top earners Google Adsense Tips for Bloggers

Google Adsense Tips for Bloggers

Heres a great series of posts from ProBlogger Darren Rowse who reveals some great tips and..

mutiple bitmaps,multiple trace,trace bitmap,tracing bitmaps,trace more than one,tracing in flash,vectorise photo in flash,trace vector,flash tutorial,flash plugin,flash extension,multiple trace bitmap,more than one bitmap Trace Multiple Vector Images in Flash with JSFL Plugin

Trace Multiple Vector Images in Flash with JSFL Plugin

Ever wondered if there was a way that would save you having to run the Trace Bitmap comman..

New, Year, Screen, Saver, create 3 Ways to Create New Year Screen Saver

3 Ways to Create New Year Screen Saver

3 Ways to create New Year screen saver for your computer. You could add make an animated s..

Featured Videos

This tutorial will teach you some of the basics of the third part..

A useful tutorial for creating an Ethernet or Patch Cable for net..

Heres some great inspiration for logo design with examples of mod..

This detailed 3D Studio Max tutorial will teach you how to animat..

A great example of how the many Photoshop tools can be used to im..

Learn CSS: Border Styles & Properties

There are many different types of border from solid one color to double line and even in and out set borders with different shades of color. The examples below show the code that you will need to use in the <style></style> tags of your div tags, images or form buttons.

 

Border Properties

Setting the width of a border is as simple as this:

<div style="border-width: 2px;"></div>

You can also use these next examples to change the color of a border:

<div style="border-color: #334455;"></div>

<div style="border-color: red;"></div>

 

Border Styles

Here are some examples of the various border types available with examples to show you how they appear.

border-width: 2px;border-style: solid; border-color: #f48039;

This is a solid border

 

border-width: 2px;border-style: dashed; border-color: #f48039;

This is a dashed border

 

border-width: 2px;border-style: dotted; border-color: #f48039;

This is a dotted border

 

border-width: 2px;border-style: double; border-color: #f48039;

This is a double border

 

border-width: 4px; border-style: groove; border-color: #f48039;

This is a groove border

 

border-width: 4px; border-style: ridge; border-color: #f48039;

This is a ridge border

 

border-width: 4px; border-style: inset; border-color: #f48039;

This is a inset border

 

border-width: 4px; border-style: outset;

This is a outset border

 

Shorthand CSS (for those who want their code to look a bit more pro)

Short hand in css is a way of writing many of the above examples in one line of property code, or in other words squeezing it all into one simple line, as follows:

<div style="border: 10px solid #f48039;"></div>

This is a outset border

 

More Web Design...

Other Content...

 Subscribe to our feed

Send to a friend