CSS Borders

Beginner ~8 min read

Border Styles

The border-style property defines the type of border. You must set this before the border will appear.

HTML

CSS

<div class='solid'>Solid border</div>
<div class='dashed'>Dashed border</div>
<div class='dotted'>Dotted border</div>
<div class='double'>Double border</div>

Border Width & Color

Control border thickness with border-width and color with border-color.

HTML

CSS

<div class='thin'>Thin blue border</div>
<div class='medium'>Medium green border</div>
<div class='thick'>Thick red border</div>

Border Shorthand

The border shorthand combines width, style, and color in one line: border: width style color;

HTML

CSS

<div class='box1'>border: 2px solid #3b82f6;</div>
<div class='box2'>border: 4px dashed #10b981;</div>
<div class='box3'>border: 3px dotted #f59e0b;</div>

Individual Sides

You can style each side independently using border-top, border-right, border-bottom, and border-left.

HTML

CSS

<div class='custom'>Different border on each side</div>

Border Radius (Rounded Corners)

The border-radius property creates rounded corners. Use pixels or percentages.

HTML

CSS

<div class='small-radius'>Small radius (8px)</div>
<div class='medium-radius'>Medium radius (16px)</div>
<div class='large-radius'>Large radius (24px)</div>
<div class='circle'>Circle (50%)</div>

Pro Tip: Use border-radius: 50% on a square element to create a perfect circle!

Summary

border-style - solid, dashed, dotted, double, etc.
border-width - Thickness in px, em, etc.
border-color - Any CSS color value
border - Shorthand: width style color
border-radius - Rounded corners
Individual sides: border-top, border-right, etc.

Quick Quiz

Which property creates rounded corners?

border-style

border-radius

border-round

corner-radius

Previous Box Model

Next Padding & Margin

Border Styles

Border Width & Color

Border Shorthand

Individual Sides

Border Radius (Rounded Corners)

Summary

Quick Quiz

Enjoying these tutorials?