border

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. User Avatar
    Druid of Lûhn
    Permalink to comment#

    Any more about borders?
    border-radius, …

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

    John

  3. User Avatar
    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. User Avatar
    Robbee

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag