border


The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:


  • border - color to indicate the color a border should be
  • border - style to indicate whether a border should be a solid, dashed, or double line, or one of the other possible values
  • border - width to indicate the width a border should be

The border - color Property


The border - color property allows you to change the color of the border surrounding a box.


p {border-color:#ff0000;}


The value can be a color name or a hex code for the color. It can also be expressed as values for red, green, and blue; between 0 and 255; or percentages of red, green, and blue.


name hex RGB Values RGB Percentages
red #ff0000 rgb ( 255 , 0 , 0 ) rgb ( 100% , 0 , 0 )
green #00ff00 rgb ( 0 , 255 , 0 ) rgb ( 0 , 100% , 0 )
blue #0000ff rgb ( 0 , 0 , 255 ) rgb ( 0 , 0 , 100% )


You can individually change the color of the bottom, left, top, and right sides of a box's border using the following properties:


  • border-bottom-color
  • border-right-color
  • border-top-color
  • border-left-color

The border-style Property


The border-style property allows you to specify the line style of the border:


p {border-style:solid;}


name Description
none No border. (Equivalent of border-width:0;)
solid Border is a single solid line.
dotted Border is a series of dots.
dashed Border is a series of short lines.
double Border is two solid lines; the value of the border-width property creates the sum of the two lines and the space between them.
groove Border looks as though it is carved into the page.
ridge Border looks the opposite of groove.
inset Border makes the box look like it is embedded in the page.
outset Border makes the box look like it is coming out of the canvas.
hidden Same as none, except in terms of border-conflict resolution for table elements.

  • border-bottom-style
  • border-right-style
  • border-top-style
  • border-left-style


The border-width Property


The border - width property allows you to set the width of your borders; usually the width is specified in pixels.


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


The value of the border - width property cannot be given as a percentage, although you could use any absolute unit or relative unit, or one of the following values:


  • thin
  • medium
  • thick

The actual width of the thin , medium , and thick values are not specified in the CSS recommendation in terms of pixels;


You can individually change the width of the bottom, top, left, and right borders of a box using the following properties:


  • border-bottom-width
  • border-right-width
  • border-top-width
  • border-left-width

Expressing Border Properties Using Shorthand


The border property allows you to specify color, style, and width of lines in one property:


p {border: 4px solid red;}


If you use this shorthand, the values should not have anything between them. You can also specify the color, style, and width of lines individually for each side of the box in the same way using these properties:


  • border-bottom
  • border-top
  • border-left
  • border-right