Featured Tutorials

flash tutorials, fireworks, particle effects, flash animation,fireworks in flash,creating fireworks,fireworks movie,fireworks display,how to create fireworks,flash fireworks tutorial,fireworks tutorial Flash Firework Frenzy

Flash Firework Frenzy

Create a realistic particle based firework display using Flash. This technique was once us..

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..

flash gallery,rotating gallery,dynamic flash,dynamic gallery,flash based gallery,flash image changing,change images Dynamic Rotating Gallery in Flash

Dynamic Rotating Gallery in Flash

This tutorial will teach you how to create a dynamic rotating gallery within flash for sho..

photoshop,line art,vector,tutorial,vector art,drawning in photoshop,drawing vector,how to draw line art,how to draw vector,photoshop drawing,drawing tutorial,pen tool,brush tools,drawing brushes Turning Photographs into Vector Line Art

Turning Photographs into Vector Line Art

Learn how to transform a standard portrait facial photograph into stylish vector line art...

change,colour,quick mask,masks,photoshop masks,hair,photoshop,hair in photoshop,change hair,change hair colour,change hair color,hair colour in photoshop,change hair,color hair,colour hair Change the Colour of Hair in Photoshop

Change the Colour of Hair in Photoshop

This Photoshop tutorial will teach you how to change the colour of hair. This effect is fa..

Featured Videos

Some great tips for how to go about designing your website with s..

This is a very detailed tutorial that will show you how to create..

A very easy photoshop tutorial that shows you how to create a stu..

Interesting artistic video of what happens when you write an emai..

Ive seen a lot of cool videos with examples of light graffiti or ..

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