Skip to Content
Learn
Boundaries and Space
Create a Border

The border property can be used to visually define a page element’s outer edge.

In CSS, the border property’s value requires three parts:

  1. thickness: Sets the thickness of the border, using pixels, ems, or rems.

  2. type: Sets the border type. Common options are solid, dotted, and dashed. There are many others.

  3. color: Sets the border’s color, using named colors, HEX, or RGB values.

The CSS below gives a paragraph element a solid black border that is 2 pixels thick:

p { border: 2px solid black; }

Instructions

1.

The web browser currently displays Tundra Gallery’s homepage. Let’s give each gallery item a border.

In main.css locate the .gallery-item class selector. Add border: 5px solid #FFF;, like so:

.gallery-item { border: 5px solid #FFF; }

Run your code to see borders around each figure with the class gallery-item in the web browser.

Folder Icon

Take this course for free

Already have an account?