CSS: Border, Outline

By Xah Lee. Date: .

Example of borders:

solid
dotted
dashed
double
groove
ridge
inset
outset

Border has this shorthand syntax:

border:solid 2px red

border is shorthand for

Sample code:

p {border:solid 2px red}

Border Style

solid is a value from border-style property.

Here's possible border-style values:

Side Borders

Border can be applied to a side only.

The properties are:

Example:

something in the water does not compute
.border21542 {
display: inline-block;
border-bottom: dotted 5px red;
}

Border with Round Corners

solid
dotted
dashed
double
groove
ridge
inset
outset

[see CSS: Round Corners]

Outline

outline is similar to border. The difference is, outline does not take up space.

Outline syntax:

outline: solid 10px blue;

outline is shorthand for

Box Model, Width, Padding, Margin, Border

  1. CSS: Margin vs Padding
  2. CSS: Border, Outline
  3. CSS: Box Sizing
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog