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

Leave a Comment

Current day month ye@r *

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