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

web design articles, css layouts, internet explorer, bug fixes,css fixes,transparent flash,flash lightbox,css help,css in IE,css problem ie,ie hacks,css hacks Internet Explorer CSS bug fixes

Internet Explorer CSS bug fixes

Fixes for some of the most common CSS bugs in internet Explorer..

graphics design,business cards,business card design,business card ideas,how to design, business card sizes,layouts Ideas for Business Card Layouts

Ideas for Business Card Layouts

Heres a few ideas for those struggling to come up with professional business card designs,..

flash,whiteboard,sketchpad,flash paint,ms paint,flash sketchpad,flash whiteboard,flash drawing,drawing effect Create your own Whiteboard / Sketchpad in Flash

Create your own Whiteboard / Sketchpad in Flash

Here's a very useful tutorial about how to create an ms paint style application within the..

photoshop,tutorial,photo editing,effects,Christmas Santa In Your Living Room

Santa In Your Living Room

This tutorial will show you how to put a person into an already existing photo (in this ca..

Featured Videos

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

Iam going to warn you that if you’re a web developer and you watc..

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

This detailed tutorial will show you how to create a realistic ch..

This tutorial will teach you a more advanced way of creating more..

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