0Pricing
CSS Academy · Lesson

Border Styles Width and Color

Apply borders with different styles, widths, and colors using shorthand and longhand properties.

border Shorthand

The border shorthand sets all four sides at once: width, style, and color.

.box {
  border: 2px solid #333;
}

.warning {
  border: 3px dashed red;
}

border-style Values

border-style must be set for a border to appear. Available values:

  • solid — continuous line
  • dashed — long dashes
  • dotted — round dots
  • double — two parallel lines
  • groove/ridge/inset/outset — 3D effects
  • none — no border (default)

All lessons in this course

  1. Understanding Width Height Margin and Padding
  2. Border Styles Width and Color
  3. Box-Sizing: Content-Box vs Border-Box
  4. Outline and Box-Shadow
← Back to CSS Academy