Tutorial search

CSS Tutorials
Tutorials
Stuff
Affiliates

Cool Stuff



How would you like to MASTER graphic design by next week?

Click here to find out how

Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS borders - CSS tutorial

Draw border by using CSS and learn the different border styles
Category: CSS tutorials - Difficulty:




The CSS border property gives you the option to specify the style and color of the border of an element. With this property, we now can create borders with nice effects, which can also be applied to any element.

There are so many options how to use the property border:

CSS Border Properties

  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-color
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-width

CSS Border width

This property has the values thin, medium and thick. You can also use a numeric value in pixels.

CSS Border Color

This property sets the color of four borders. The color values can be any of the three: hex code, rgb or the basic color name.

CSS Code Example:

table { border-color: rgb( 100, 100, 255);
border-style: solid; }

td { border-color: #FFBD32;
border-style: solid; }

p { border-color: blue;
border-style: solid; }

CSS Border Style

This property sets the style of borders. There are many different types of borders you can choose from. If you do not want to put any border, you can use the values “none” or “hidden”.

Examples of different types of borders:

Dotted p.dotted {border-style: dotted; }

Dashed p.dashed {border-style: dashed; }

Solid p.solid {border-style: solid; }

Double p.double {border-style: double; }

Groove p.groove {border-style: groove; }

Ridge p.ridge {border-style: ridge; }

Inset p.inset {border-style: inset; }

Outset p.outset {border-style: outset; }

Hidden p.hidden {border-style: hidden; }

The defined properties above (border-width, border-color and border-style) can actually be formulated to produce different borders for different elements.

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

Special properties for sides (top, bottom, right and left) can also be specified. Here is an example:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;

}

CSS Border Compilation

As the title suggests, this property allows you to compile many properties into one using border.

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

The example above can be compiled into:

p {
border: 1px solid blue;
}

There are still more to learn about borders. You just have to try to learn new ways to explore the many options for designing your borders.