0Pricing
CSS Academy · Lesson

Border Styles Width and Color

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

Border Styles Width and Color is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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)

border-width

border-width accepts any length unit or the keywords thin, medium, thick. Use numbers for precision.

.thin-border   { border-width: 1px; }
.medium-border { border-width: 4px; }
.thick-border  { border-width: 8px; }

border-color

border-color accepts any CSS color value including RGBA for transparency. currentColor inherits the text color.

.card {
  border-color: rgba(0, 0, 0, 0.15);
}

.icon-btn {
  border: 2px solid currentColor;
}

Individual Side Borders

Set borders on specific sides with longhand properties:

.bottom-only {
  border: none;
  border-bottom: 2px solid #ddd;
}

.left-accent {
  border-left: 4px solid royalblue;
  padding-left: 12px;
}

border-radius

border-radius rounds element corners. Use a single value for uniform rounding or up to four values for per-corner control.

.card   { border-radius: 8px; }
.pill   { border-radius: 9999px; }
.circle { border-radius: 50%; }
.custom { border-radius: 8px 16px 4px 24px; }

Elliptical border-radius

Each corner radius can have two values separated by / for asymmetric elliptical rounding:

.leaf {
  border-radius: 0 70% 70% 0 / 0 50% 50% 0;
}

border-image

border-image replaces the border with a sliced image or gradient, enabling decorative borders:

.fancy {
  border: 8px solid transparent;
  border-image: linear-gradient(to right, red, blue) 1;
}

outline vs border

outline draws a line outside the border. Unlike border, it does not affect layout or element dimensions. It is commonly used for keyboard focus indicators.

:focus {
  outline: 3px solid royalblue;
  outline-offset: 2px;
}

Removing outline: Use Wisely

Never remove :focus outlines without providing an alternative visible focus indicator. Removing focus styles harms keyboard and screen reader users.

/* BAD — never do this without a replacement */
* { outline: none; }

border-collapse for Tables

For HTML tables, border-collapse: collapse merges adjacent cell borders into a single line for a cleaner look.

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
}

Quick Check

Which CSS property draws a line outside the border without affecting element layout?

Recap

The border shorthand sets width, style, and color. border-radius rounds corners. outline is separate from the border — it does not affect layout and is critical for keyboard accessibility focus indicators.

Frequently asked questions

Is the “Border Styles Width and Color” lesson free?

Yes — the full text of “Border Styles Width and Color” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Border Styles Width and Color”?

Apply borders with different styles, widths, and colors using shorthand and longhand properties. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Border Styles Width and Color” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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