CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS border properties

With CSS border properties, you can specify how borders appear around elements.

This tutorial focuses on:

Setting the style of a border

The style of a border is set with the border-style property.

Possible values for the border-style property: dashed, dotted, solid, groove, double, outset

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1 {border-style: dashed;} h2 {border-style: double;} p {border-style: dotted;} a {border-style: groove;} </style> </head> <body> <h1>This text has a dashed border</h1> <h2>This text has a double border</h2> <p>This text has a dotted border</p> <a href="http://www.yahoo.com">This text has a groove border</a> </body> </html>
Output:

This text has a dashed border

This text has a double border

This text has a dotted border

This text has a groove border

Setting the width of a border

The width of a border is set with the border-width property. The values you can assign to this property include "thin", "medium", "thick", or a custom value in pixels.

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1 {border-style: dashed; border-width: thin;} h2 {border-style: double; border-width: medium;} p {border-style: dotted; border-width: thick;} a {border-style: groove; border-width: 10px;} </style> </head> <body> <h1>This text has a dashed border</h1> <h2>This text has a double border</h2> <p>This text has a dotted border</p> <a href="http://www.yahoo.com">This text has a groove border that has a thickness of 10 pixels</a> </body> </html>
Output:

This text has a thin dashed border

This text has a medium double border

This text has a thick dotted border

This text has a groove border that has a thickness of 10 pixels

Setting the color of a border

The color of a border is set with the border-color property. The values you can assign to this property include a color name, an RGB value, or a hexadecimal value.

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1 {border-style: dashed; border-color: green;} h2 {border-style: double; border-color: #556b2f;} p {border-style: dotted; border-width: rgb(128, 128, 128);} a {border-style: groove; border-color: #2f7e87;} </style> </head> <body> <h1>This text has a green dashed border</h1> <h2>This text has a darkolivegreen double border</h2> <p>This text has a gray dotted border</p> <a href="http://www.yahoo.com">This text has a teal groove border</a> </body> </html>
Output:

This text has a green dashed border

This text has a darkolivegreen double border

This text has a gray dotted border

This text has a teal groove border
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information