The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern


Last updated on:

Every element on a page is a rectangular box. All the way from the root <html> element to the lowly <i> element. You can apply a border to any of those rectangular boxes with the border property. Here's a classic example of a box with a border:

.box {
  width: 200px;
  height: 100px;
  border: 3px solid red;
  background: #eee;

The above was the shorthand syntax, in the format:

border:  <border-width> || <border-style> || <color>

It could have been expressed through each individual property:

.box {
  border-width: 3px;   /* defaults to medium */
  border-color: red;   /* defaults to color (literally, the color property) */
  border-style: solid; /* defaults to none */

More Information


Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 3.5+ 4+ Any Any


  1. Druid of Lûhn
    Permalink to comment#

    Any more about borders?
    border-radius, …

  2. John Lueders
    Permalink to comment#

    Hi Chris,

    Would like to see the list of available border style properties here. Believe that would be helpful.

    hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

    Also, you insight/opinion on these styles. I see solid, dotted, dashed frequently but not the others…are they going out of style?…are they being deprecated?

    All the best,


  3. cyran

    how this site is really helpful but am in agreement with john what about the other styles hidden, dotted, dashed, solid, double, groove, ridge, inset, outset?
    why are they not included.

  4. Robbee

    Thanks for the help. This site is good when I have trouble making the code right.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed