Featured Tutorials

css,dreamweaver,css dreamweaver,css problem,dreamweaver problem,fix css dreamweaver,fixing css,center background,conflicting styles CSS Problem Solving in Dreamweaver

CSS Problem Solving in Dreamweaver

Here's a great article/tutorial that covers the solutions to some common problems when dev..

shape dynamics,grass text,bush text,tree text,green text,text effects,brush effects,photoshop tutorial,leafy text,leaves text,brush dynamics,grass effect text,grass text,text with brush Text Effects #3 Brush Text with Shape Dynamics

Text Effects #3 Brush Text with Shape Dynamics

Learn how to create dynamic text effects with shape dynamics that allows you to write text..

ADO, ADO.NET, ASP, VB, C#, c sharp, database ADO Connection Strings

ADO Connection Strings

A reasonably comprehensive list of ADO and ADO.NET database connection strings for use wit..

photoshop,tutorial,photo editing,effects,filters Create a Time is Money hour glass in photoshop

Create a Time is Money hour glass in photoshop

In this tutorial we will learn how to create an hourglass...

graphics design tutorials, how to design logos, logo design,flash drawing,drawing in flash,design in flash,logo illustration,how to logo design,easy logo design,how to design logos,logos,flash logos Tips and tricks for designing logos

Tips and tricks for designing logos

How to design a logo covering some good font techniques, how to get inspiration, playing w..

Featured Videos

Another amazing video showing how easy it is to change a persons ..

Foto Flexer is an amazing tool allows you to resize photos dynami..

Heres a cool tutorial slash speed painting of painting realistic ..

This video shows off the upcoming Flash "Next" 10 from the Adobe ..

Some amazing footage of how Photoshop can be used to great effect..

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