Borders

CSS Borders

Borders are frames around your boxes. You control their style, width, and color.

border-style (the one that matters!)

The border style is required, if the style is none, the border is invisible no matter the width/color.

div {
  border-style: solid;
}

Common styles:

• solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.

border-width

How thick the border is:

div {
  border-style: solid;
  border-width: 5px;
}

You can also use thin, medium, thick.

border-color

The border's color:

div {
  border-style: solid;
  border-color: red;
}

Border on one side only

Pick a side: border-top, border-right, border-bottom, border-left.

div {
  border-left: 5px solid green;
}

The shorthand

border: width style color, in that order:

div {
  border: 5px solid red;
}

Rounded corners: border-radius

Make corners round:

div {
  border: 2px solid navy;
  border-radius: 15px;   /* all four corners */
}

• border-radius: 50% makes it a circle (when the box is square)!
• You can do per-corner: border-top-left-radius etc.

TL;DR

• border-style is REQUIRED.
• border-width and border-color style it further.
• Sides: border-top/right/bottom/left.
• Shorthand: border: 5px solid red.
• border-radius rounds the corners.