PricingLoginStart free
CSS Academy · Lesson

Border Styles Width and Color

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

Lesson 2 of 413 steps

Border Styles Width and Color is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

border Shorthand

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

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

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.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

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

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Individual Side Borders

Set borders on specific sides with longhand properties:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

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

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Elliptical border-radius

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

<div class="leaf"></div>

border-image

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

<div class="fancy">Gradient border image</div>

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.

<button class="focus-demo">Focused Button (demo)</button>

Removing outline: Use Wisely

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

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse for Tables

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

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Quick Check

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

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159
Start learning freeView the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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