Featured Tutorials

photoshop background,brush effects,vector effects,filter effects,photoshop effects,photoshop brushes,vector photoshop,dotted background,dotted vector Snazzy Vector Background Effect in Photoshop

Snazzy Vector Background Effect in Photoshop

This simple but effective tutorial teaches you how to create a cool vector pattern backgro..

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

hardware articles, CD, DVD, cleaning, home remedy,cds with toothpaste,toothpaste,clean with toothpaste,dvds toothpaste,clean dvd,how to clean cds,how to clean dvd,dvd cleaner Clean your CD's/DVD's with toothpaste!

Clean your CD's/DVD's with toothpaste!

The low-cost answer to keeping your CD's/DVD's clean and functional...

realistic,graffiti,photoshop,grafiti,grafitti,,photo,photograph,texture,wall textures,how to graffiti,grafitti in photoshop,photoshop brushes,custom brushes Adding Realistic Graffiti to a Photograph in Photoshop

Adding Realistic Graffiti to a Photograph in Photoshop

This tutorial will show you how to add realistic looking graffiti to a photograph or wall ..

css tutorial,css tutorials,css backgrounds,backgrounds in css,css,backgrounds,background,background image,background shorthand,short hand css,learn css,learn css backgrounds Learn CSS: Background Images

Learn CSS: Background Images

This simple tutorial will teach you about the background property in CSS, there are many w..

Featured Videos

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

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

This spoof advert copies the popular Citroen C4 commercials and s..

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

Particle Illusion is one of those cool particle effect programs t..

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