Home » CSS, CSS3, Design

css3 border

14 December 2011 No Comment
Share on Facebook

CSS3 border allows you to change the look of a css element. CSS border is one of the widely used css property. With CSS3 border property you can specify border style, color and width of a CSS element border.

In this article we are going to discuss CSS3 border property and how to change border color, width and style.

Also try css3 border generator

CSS3 Border Compatibility:

All the browsers support css3 border.

css3 border


Topics covered:

  • border-style
  • border-color
  • border-width

Let’s discus each of the css3 border property in detail.

CSS3 Border-style:

Every side of a css element border like border-top-style , border-right-style, border-bottom-style, border-left-style can be styled individually. There are different

Type of border style available in css3 are listed below.

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • dot-dash
  • dot-dot-dash
  • wave
  • groove
  • ridge
  • inset
  • outset


css3 border styles

[ CSS3 border styles ]

Example of css3 border-style:


Note: There is no way to control the spacing between dots or dashes.

css3 simple dashed border

[ simple css3 dashed border demo ]

CSS3 Border-color:

border-color attribute is to set the color of the border. It can be either hexadecimal value, or RGBA, or Color names like Red, Green, Blue..

Note: we need to set the border-style before using border-color property.

Example of css3 border-color:


css3 border color

[ css3 border color demo ]

CSS3 Border-width:

border-width is to control width of the border, measured in px.

Example of css3 border-width:


CSS3 border all together:

	border:dashed 7px #0099FF;
	-moz-border-radius-topleft: 6px;

CSS3 border radius:

we have discussed CSS3 rounder border seperately. follow the link to article css3 border radius.


In this basic article we have discussed how to control the css3 border property.

Keywords to here:

  • css3 border
  • css border
  • css3 radius
  • border radius css
  • css3 border generator


We don't share your email anywhere, grab our rss via feedburner

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.