CSS Tutorial - CSS Border








The three key properties for basic borders are border-width, border-style, and border-color.

  • border-width - Sets the width of the border.
  • border-style - Sets the style used to draw the border.
  • border-color - Sets the color of the border. Value: color.

The following code defines a Basic Border. 


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww .j  av  a  2  s .  c  o  m-->
  border-width: 5px;
  border-style: solid;
  border-color: black;
}
</style>
</head>
<body>
  <p>This is a test.</p>
</body>
</html>

The code above is rendered as follows:





Border Width

You may express the border-width property as

  • a regular CSS length: em, px, or cm
  • a percentage of the width of the area that the border will be drawn around: perc%
  • one of three shortcut values: thin, medium, thick

The default border-width value is medium.

The following code defines a Basic Border. 


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from   w ww.ja v a 2 s. co m-->
  border-width: 5px;
  border-style: solid;
  border-color: black;
}
</style>
</head>
<body>
  <p>This is a test.</p>
</body>
</html>

The code above is rendered as follows:





Border Style

The border-style property can be one of the values shown in the following list.

  • none - No border.
  • dashed - A series of rectangular dashes.
  • dotted - A series of circular dots.
  • double - Two parallel lines with a gap between them.
  • groove - Sunken into the page.
  • inset - The content looks sunken into the page.
  • outset - The content looks raised from the page.
  • ridge - The border appears raised from the page.
  • solid - A single, unbroken line.

The default value is none, meaning that no border is drawn.

The following code defines a Basic Border. 


<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
div {<!--  w w w  . j  a  v a2  s  .  c o  m-->
    padding: 10px;
    margin: 10px;
    border: thick black;
}
</style>
</head>
<body>
   <div style='border-style: dashed;'> border-style: dashed;</div>
   <div style='border-style: solid;'>border-style: solid;</div>
   <div style='border-style: ridge;'>border-style: ridge;</div>
   <div style='border-style: outset;'>border-style: outset;</div>
   <div style='border-style: none;'>border-style: none;</div>
   <div style='border-style: inset;'>border-style: inset;</div>
   <div style='border-style: hidden;'>border-style: hidden;</div>
   <div style='border-style: groove;'>border-style: groove;</div>
   <div style='border-style: dotted;'>border-style: dotted;</div>
</body>
</html>

The code above is rendered as follows:

Border Color

border-color controls the border color.

The following code shows how to set border-color to blue.


<html>
<head>
<style type="text/css">
div {<!--from   ww w .java2 s. co  m-->
    margin-bottom: 1em;
    padding: .5em;
    border-width: thick;
    border-color: blue;
    border-style: groove;
}
.dotted {
    border-color: red;
    border-width: medium;
    border-style: dotted;
    text-align: center;
}
#two {
    border-style: double solid;
    border-color: red green purple blue;
    border-width: thin medium thick .25cm;
}
</style>
</head>
<body>
    <div>this is a test.</div>
    <p class="dotted">Dotted</p>
    <p id="two">This is another paragraph 
            that has its borders set in a very bizarre way!</p>
</body>
</html>

The code above is rendered as follows:

Single Side Border

You can apply different borders to each side of an element using properties that are more specific.

  • border-top
    border-top-width
    border-top-style
    border-top-color
    Defines the top border.
    Values are the same as for the generic properties.
  • border-left
    border-left-width
    border-left-style
    border-left-color
    Defines the left border.
    Values are the same as for the generic properties.
  • border-right
    border-right-width
    border-right-style
    border-right-color
    Defines the right border.
    Values are the same as for the generic properties.
  • border-bottom
    border-bottom-width
    border-bottom-style
    border-bottom-color
    Defines the bottom border.
    Values are the same as for the generic properties.

The following code uses the Side-Specific Border Properties. 


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h2 {<!--from w  ww  . j  a v a  2  s. co  m-->
    border-bottom-style: dashed;
}

p {
  border-width: 5px;
  border-style: solid;
  border-color: black;
  border-left-width: 10px;
  border-left-style: dotted;
  border-top-width: 10px;
  border-top-style: dotted;
}
.myStyle {
   border-bottom: 1px dotted black;
}

</style>
</head>
<body>
    <h2>This is the title</h2>
  <p>This is a test.</p>
  <span class="myStyle">Under 5</span>
</body>
</html>

The code above is rendered as follows:

border Shorthand

You can use shorthand properties that set all three values in one step.

  • border
    Sets the border for all edges.
    Value: width style color
  • border-top
    border-bottom
    border-left
    border-right
    Sets the border for a single edge.
    Value: width style color

You set the values for these properties by specifying the width, style, and color values in a single line, separated by spaces. 


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from ww  w .ja  v a 2  s .  c  om-->
  border: medium solid black;
}
div#shorthand {
    border: 1px solid crimson;
}
</style>
</head>
<body>
  <p>This is a test.</p>
    <div id='shorthand'>border</div>  
</body>
</html>

The code above is rendered as follows:

The color for the border-top property is not set. If you omit one or more of the values, the browser will use whatever value has been previously defined.

In this case, the color specified by the border shorthand property.

Property Description CSS
border-bottom-color Sets the color of the bottom border1
border-bottom-left-radius Set the border radius for the bottom-left corner3
border-bottom-right-radius Set the border radius for the bottom-right corner3
border-bottom-style Set the border bottom style1
border-bottom-width Set the width for bottom border1
border-bottom Shorthand property for bottom border1
border-collapse collapse table borders2
border-color Sets the color for the four borders1
border-image-outset Set distance the border image area extends beyond the border box3
border-image-repeat repeat, round or stretch image-border3
border-image-slice Set the inward offsets of the image-border3
border-image-source Set border image location3
border-image-width Set the widths of the image-border3
border-image Shorthand property for all the border-image-* properties3
border-left-color Set color for left border1
border-left-style Set style for left border1
border-left-width Set width for left border1
border-left Shorthand property for left border1
border-radius shorthand property for setting all the four border-*-radius properties3
border-right-color Set color for right border1
border-right-style Set style for right border1
border-right-width Set width for right border1
border-right Shorthand property for right border1
border-spacing Set the distance between the borders of adjacent cells2
border-style Set style for all four borders1
border-top-color Set color for top border1
border-top-left-radius Set border radius for top left3
border-top-right-radius Set border radius for top right3
border-top-style Set style for top border1
border-top-width Set width for top border1
border-top Shorthand property for top border1
border-width Set border width for all four directions1
border Shorthand border setting1