CSS Borders and Border Radius

Borders frame elements and border-radius changes the corners of the frame.

A border consists of width, style and color: border: 2px solid #2563eb. Each side can be styled individually using properties such as border-bottom. The border-radius property rounds corners, and sufficiently large radii can make pill-shaped controls.

Unlike an outline, borders contribute to box sizing. A border may be a subtle divider or a deliberate design accent.

The border follows the outer edge of the padding box. Border radius rounds the corresponding corners.

Compare a solid panel and a dashed callout.

HTML

<div class="blocks"><span class="solid">Solid</span><span class="dashed">Dashed</span></div>

CSS

.blocks span { display: inline-block; margin: 6px; padding: 15px 24px; }
.solid { border: 2px solid #2563eb; }
.dashed { border: 2px dashed #7c3aed; }

Rendered output

Observe: Both have a 2px border, but the style changes its appearance.

Apply a large radius to form a pill-like label.

HTML

<span class="pill">Featured lesson</span>

CSS

.pill { display: inline-block; padding: 10px 20px; border: 2px solid #0f766e; border-radius: 999px; background: #ccfbf1; color: #115e59; }

Rendered output

Observe: The large radius makes the small rectangular label fully rounded at the ends.

The border follows the outer edge of the padding box. Border radius rounds the corresponding corners.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A border style such as solid must be present for a regular visible border.
• Borders take layout space; outlines generally do not.

Set only the left border of a callout to 5px solid blue and remove the other sides.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use borders for structural separation and border-radius for corner treatment.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.