Did you find this useful?
Socialize it today.


CSS Border

Monday, March 19, 2012

tags CSS

The CSS Border property allows you to customize the borders that appear around HTML elements just outside of the padding area. With HTML alone, it is not possible to place a border around an element, except for the table element. CSS Borders let you create crisp, clean, customized border styles with little effort. There are a number types of border styles at your disposal. You can add thickness and color to your borders. The number of combinations is almost limitless.

Border Styles

The border-style property specifies what type of border to display. The border-style property is required if you want to set additional border properties.


p {border-style: none; }

Border-style set to none.

p {border-style: hidden; }

Border-style set to hidden.

p {border-style: solid; }

Border-style set to solid.

p {border-style: double; }

Border-style set to double.

p {border-style: dotted; }

Border-style set to dotted.

p {border-style: dashed; }

Border-style set to dashed.

p {border-style: groove; }

Border-style set to groove.

p {border-style: inset; }

Border-style set to inset.

p {border-style: outset; }

Border-style set to outset.

p {border-style: ridge; }

Border-style set to ridge.



Border Width

To alter the thickness of your border, use the border-width property. Just as a reminder, you must define a border-style so that the border the border is visible. You can assign an exact value to the border, or general values such as thin, medium, or thick.


p {border-style: solid; border-width:2px }

Border-width set to 2px.

p {border-style: solid; border-width:medium}

Border-width set to medium.

p {border-style: dotted; border-width:.75em }

Border-width set to .75em.

p {border-style: dashed; border-width:thick}

Border-width set to thick.



Border Color

We can also customize the color of the border by using the border-color property. Border colors can be any color defined by RGB, HEX, or color names.


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

Border-color set to red.

p {border-style: dotted; border-color:00FF00}

Border-color set to #00FF00.

p {border-style: dashed; border-width:rgb(0,0,255)}

Border-color set to rgb(0,0,255).



Border Width

To alter the thickness of your border, use the border-width property. Just as a reminder, you must define a border-style so that the border the border is visible. You can assign an exact value to the border, or general values such as thin, medium, or thick.


p {border-style: solid; border-width:2px }

Border-width set to 2px.

p {border-style: solid; border-width:medium}

Border-width set to medium.

p {border-style: dotted; border-width:.75em }

Border-width set to .75em.

p {border-style: dashed; border-width:thick}

Border-width set to thick.



Border Sides

With CSS, it is possible to specify different borders for different sides of the HTML element. The sides are top, right, bottom, and left. CSS allows you to treat each side of a border separately from the other three sides. Each side can have its own style, color, and width.


p { border-top-style: solid;
border-top-color: green;
border-top-width: 8px;
border-right-style: dashed;
border-right-color: red;
border-right-width: 6px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-bottom-width: 4px;
border-left-style: outset;
border-left-color: black;
border-left-width: 2px;}

This paragraph has many border styles, widths, and colors.



Border Property (Shorthand)

There are a lot of border properties to deal with. When you are trying to apply many properties and values, there could be too much CSS code to work with. To shorten the code, it is also possible to specify all the border properties in one property. This is called a shorthand property. The shorthand property for the border is simply "border".


p { border: 10px solid blue; }

This paragraph has a solid blue border with a width of 10px .



When using the border property, the order of the values are: border-width, border-style, and border-color. The only value required is border-style. Also, some of the other border-type properties can be written in shorthand has well. For example, with border-style, you can set the four sides of the element with different styles: {border-style: top right bottom left }

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor CSS: The Missing Manual