CSS Borders

❮ Previous Next ❯

You can use CSS border properties to choose how an element's border looks, how thick it is, and what color it has.

Borders on all sides.

Red bottom border.

Rounded borders.

Blue left border.

CSS Border Style

The border-style property tells us what type of border to show.

The following values are allowed:

dotted - Specifies a dotted border
dashed - Specifies a dashed border
solid - Specifies a solid border
double - Specifies a double border
groove - Specifies a 3D grooved border. The effect depends on the border-color you specify.
ridge - Specifies a 3D ridged border. The effect depends on the border-color you specify.
inset - Specifies a 3D inset border. The effect depends on the border-color you specify.
outset - Specifies a 3D outset border. The effect depends on the border-color you specify.
none - Specifies no border
hidden - Specifies a hidden border

The border-style propertycan be set with one to four values. These values control how the borders look on the top, right, bottom, and left sides of an element.

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color you specify..

A ridge border. The effect depends on the border-color you specify..

An inset border. The effect depends on the border-color you specify..

An outset border. The effect depends on the border-color you specify..

No border.

A hidden border.

A mixed border.

Try it Yourself »

Note: You need to remember that the border-style property must be set for any of the other CSS border properties (which you'll learn about later) to work.

CSS Border Width

The border-width property tells us how wide the four borders are.

You can choose how wide something is by picking from three options: thin, medium, or thick(in px, pt, cm, em, etc).

Example

p.one {
border-style: solid;
border-width: 5px;
}

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

p.three {
border-style: dotted;
  border-width: 2px;
}

p.four {
border-style: dotted;
  border-width: thick;
}

Result:

5px border-width

medium border-width

2px border-width

thick border-width

Try it Yourself »

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - Mention a color, such as "red."
HEX - you can choose a HEX color by using a code like "#ff0000".
RGB - you can choose an RGB color by using the format 'rgb(255, 0, 0)'.
HSL - you can choose an HSL value, such as "hsl(0, 100%, 50%)".
transparent

Note: If you don't choose a border-color it takes on the same color as the element.

Example

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

p.two {
border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Result:

Red border

Green border

Blue border

Try it Yourself »

Specific Side Colors

The border-color property can hold between one and four values. These values control the color of the top, right, bottom, and left borders.

Example

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Try it Yourself »

HEX Values

You can choose a border color by using a HEX code, which is a combination of numbers and letters.

Example

p.one {
border-style: solid;
border-color: #ff0000; /* red */
}

Try it Yourself »

CSS Border - Individual Sides

You've already seen in the earlier examples that you can choose separate borders for each side.

In CSS, you can use properties to describe each of the borders individually. These borders are the ones on the top, right, bottom, and left sides.

Example

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Result:

Different Border Styles

Try it Yourself »

So, here is how it works:

When the border-style property has four values:

border-style: dotted solid double dashed;
- dotted top border
- solid right border
- double bottom border
- dashed left border

When border-style property has three values:

border-style: dotted solid double;
- dotted top border
- solid right and left borders
- double bottom border

When border-style property has two values:

border-style: dotted solid;
- dotted top and bottom borders
- solid right and left borders

When border-style property has one value:

border-style: dotted;
- all four sides borders are dotted

Example

/* Four values */
p {
border-style: dotted solid double dashed;
}

/* Three values */
p {
border-style: dotted solid double;
}

/* Two values */
p {
border-style: dotted solid;
}

/* One value */
p {
border-style: dotted;
}

Try it Yourself »

CSS Border - Shorthand Property

As you read earlier, there's a lot to think about when it comes to borders and their properties.

You can make the code shorter by putting all the different border settings into one property.

The border property is a way to set multiple border properties at once. It's like a shortcut for setting these properties separately:

border-width
border-style (required)
border-color

Example

p {
border: 5px solid red;
}

Result:

Some text

Try it Yourself »

You can describe all the separate border characteristics for only one side:

Left Border

p {
border-left: 6px solid red;
}

Result:

Some text

Try it Yourself »

CSS Rounded Borders

The border-radius property helps make an element's borders look rounded:

Round border

Rounder border

Roundest border

Example

p {
border: 2px solid red;
border-radius: 5px;
}

Try it Yourself »

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.dotted {
        border-style: dotted;
      }

      p.dashed {
        border-style: dashed;
      }

      p.solid {
        border-style: solid;
      }

      p.double {
        border-style: double;
      }

      p.groove {
        border-style: groove;
      }

      p.ridge {
        border-style: ridge;
      }

      p.inset {
        border-style: inset;
      }

      p.outset {
        border-style: outset;
      }

      p.none {
        border-style: none;
      }

      p.hidden {
        border-style: hidden;
      }

      p.mix {
        border-style: dotted dashed solid double;
      }
    </style>
  </head>
  <body>
    <h2>The border-style Property</h2>
    <p>This property specifies what kind of border to display:</p>
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
    <p class="groove">A groove border.</p>
    <p class="ridge">A ridge border.</p>
    <p class="inset">An inset border.</p>
    <p class="outset">An outset border.</p>
    <p class="none">No border.</p>
    <p class="hidden">A hidden border.</p>
    <p class="mix">A mixed border.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }

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

      p.three {
        border-style: dotted;
        border-width: 2px;
      }

      p.four {
        border-style: dotted;
        border-width: thick;
      }

      p.five {
        border-style: double;
        border-width: 15px;
      }

      p.six {
        border-style: double;
        border-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p>This property specifies the width of the four borders:</p>
    <p class="one">Some text.</p>
    <p class="two">Some text.</p>
    <p class="three">Some text.</p>
    <p class="four">Some text.</p>
    <p class="five">Some text.</p>
    <p class="six">Some text.</p>
    <p>
      <b>Note:</b>The "border-width" property won't function on its own. You must always indicate the "border-style" property to define the borders initially.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        border-style: solid;
        border-color: red;
      }

      p.two {
        border-style: solid;
        border-color: green;
      }

      p.three {
        border-style: dotted;
        border-color: blue;
      }
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p>This property specifies the color of the four borders:</p>
    <p class="one">A solid red border</p>
    <p class="two">A solid green border</p>
    <p class="three">A dotted blue border</p>
    <p>
      <b>Note:</b> The "border-color" property won't function on its own. You need to use the "border-style" property first to define the borders.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        border-style: solid;
        border-color: red green blue yellow;
        /* red top, green right, blue bottom and yellow left */
      }
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p>The border-color property can take one to four values, specifying the color for the top, right, bottom, and left borders respectively.</p>
    <p class="one">A solid multicolor border</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        border-style: solid;
        border-color: #ff0000;
        /* red */
      }

      p.two {
        border-style: solid;
        border-color: #0000ff;
        /* blue */
      }

      p.three {
        border-style: solid;
        border-color: #bbbbbb;
        /* grey */
      }
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p>You can set the border color using a HEX value.</p>
    <p class="one">A solid red border</p>
    <p class="two">A solid blue border</p>
    <p class="three">A solid grey border</p>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        text-align: center;
      }

      /* Four values */
      p.four {
        border-style: dotted solid double dashed;
      }

      /* Three values */
      p.three {
        border-style: dotted solid double;
      }

      /* Two values */
      p.two {
        border-style: dotted solid;
      }

      /* One value */
      p.one {
        border-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Individual Border Sides</h2>
    <p class="four">4 different border styles.</p>
    <p class="three">3 different border styles.</p>
    <p class="two">2 different border styles.</p>
    <p class="one">1 border style.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <h2>The border Property</h2>
    <p>This property is a shorthand property for border-width, border-style, and border-color.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left: 6px solid red;
        background-color: lightgrey;
      }
    </style>
  </head>
  <body>
    <h2>The border-left Property</h2>
    <p>This property combines border-left-width, border-left-style, and border-left-color into a single, convenient shorthand.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 2px solid red;
        padding: 5px;
      }

      p.round1 {
        border: 2px solid red;
        border-radius: 5px;
        padding: 5px;
      }

      p.round2 {
        border: 2px solid red;
        border-radius: 8px;
        padding: 5px;
      }

      p.round3 {
        border: 2px solid red;
        border-radius: 12px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p>This property is used to add rounded borders to an element:</p>
    <p class="normal">Normal border</p>
    <p class="round1">Round border</p>
    <p class="round2">Rounder border</p>
    <p class="round3">Roundest border</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Borders

CSS Border Style

Example

CSS Border Width

Example

CSS Border Color

Example

Specific Side Colors

Example

HEX Values

Example

CSS Border - Individual Sides

Example

Example

CSS Border - Shorthand Property

Example

Left Border

CSS Rounded Borders

Example

Web Development