Borders & Thickness
What is a Border?
Imagine a picture frame hanging on a wall. The frame acts as a physical boundary, separating the artwork inside from the wall paint outside. The frame can be a thin black wire, a thick wooden molding, or a gold dotted frame.In CSS, the Border is the outline that wraps directly around an element's padding. It defines the physical edge of the element's box. You can configure three properties for a border: its thickness (width), its pattern style (solid, dashed, dotted), and its color.
Why does it matter?
Borders are visual guides that structure webpages. They separate cards from backgrounds, outline inputs to show where users can type, and create dividing lines between sections of a list.Syntax Breakdown
You can define borders using a clean shorthand property:border: [width] [style] [color];
E.g., border: 2px solid red;
width (2px): How thick the outline is (can use px, em, rem).style (solid): The pattern. Common styles include solid (flat line), dashed (dashed line), dotted (dots), and double (two lines).color (red): The border color.Common Mistakes
border: 2px red; without specifying solid, dashed, etc., the border will not render at all! The style parameter is mandatory for the border to display.text-decoration: underline; instead.Quick Reference
border — Shorthand for width, style, and color.border-width — Controls thickness.border-style — Sets the outline pattern.border-color — Sets the outline color.Your Task
Add a border to the `.box` class with a thickness of `4px`, a style of `dashed`, and a color of `blue`.
index.html
Type code above to start the lesson.
Live Preview