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:

.borderStyle{
	border-style:dashed;
}

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:

.borderStyle{
	border-style:dotted;
	border-color:#CCC;
}

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:

.borderStyle{
	border-style:dotted;
	border-color:#CCC;
	border-width:5px;
}

CSS3 border all together:

.borderStyle{
	border:dashed 7px #0099FF;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius:6px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	}

CSS3 border radius:

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

Conclusion:

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

GET THE UPDATES VIA EMAIL

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