CSS Border

The CSS border properties define the borders around an element.

Examples

All the border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.

Set different borders on each side
This example demonstrates how to set different borders on each side of the element.

All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.

All the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration.

All the left border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the left border in one declaration.

All the right border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the right border in one declaration.

Set the style of the four borders
This example demonstrates how to set the style of the four borders.

Set the style of the top border
This example demonstrates how to set the style of the top border.

Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.

Set the style of the left border
This example demonstrates how to set the style of the left border.

Set the style of the right  border
This example demonstrates how to set the style of the right border.

All the width of the border properties in one declaration
This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.

Set the width of the top border
This example demonstrates how to set the width of the top border.

Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the width of the right border
This example demonstrates how to set the width of the right border.

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the color of the top border
This example demonstrates how to set the color of the top border.

Set the color of the bottom border
This example demonstrates how to set the color of the bottom border.

Set the color of the left border
This example demonstrates how to set the color of the left border.

Set the color of the right border
This example demonstrates how to set the color of the right border.

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Unlimited Disk and Transfer Hosting - New from Go Daddy!

Go Daddy Unlimited Hosting is the reliable, cost-effective choice for site owners who want superior speed and reliability. Available for Linux or Windows, our Unlimited Hosting accounts come with unlimited disk space and bandwidth, 1,000 email accounts, 50 MySQL Databases, a FREE SSL Certificate and over 50 FREE downloadable applications and utilities available through our exclusive Hosting Connections. Count on the world’s largest hostname provider to keep your site up and running—even when you’re not!

Take the uncertainty out of Web hosting and let GoDaddy.com put service, performance and value back in. No matter which hosting type or plan you choose, your site receives 24/7 maintenance and protection in our world-class data center.

Virtual Dedicated, Dedicated Server and unlimited plans also available.

Save 10% on web hosting - Enter code w3tenoff at checkout

Get Your Diploma! W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building. The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS. The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM. The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2008 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999