Grow your CSS skills. Land your dream job.

border

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

Related

Browser Support

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

Comments

  1. Any more about borders?
    border-radius, …

  2. 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,

    John

  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. Thanks for the help. This site is good when I have trouble making the code right.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".