How can you add a border around an element?

LowEasyCss

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse CSS interview questions Explore interview tracks Browse company questions

Quick Answer

Add a border with the shorthand: border: 1px solid #333;. You can also set border-width, border-style, and border-color separately for finer control. In UI validation and focus states, borders signal errors; watch layout shifts and accessibility contrast, and test across browsers.

Answer

Overview

The border property allows developers to define the style, thickness, and color of borders around elements. You can specify each side’s border individually or use the shorthand form to apply all at once.

Property	Purpose	Example
border-width	Sets the thickness of the border.	border-width: 2px;
border-style	Defines the border’s line pattern.	border-style: solid;
border-color	Specifies the border color.	border-color: #333;
border	Shorthand combining width, style, and color.	border: 2px dashed blue;

Core border properties in CSS

Example: Adding a Simple Border

CSS

div.box {
  border: 3px solid #4CAF50;
  padding: 20px;
  background-color: #f9f9f9;
}

This creates a 3px solid green border around a <div> while adding internal padding and a light background.

Example: Customizing Each Side

CSS

p.note {
  border-top: 2px solid black;
  border-right: 2px dotted gray;
  border-bottom: 2px dashed red;
  border-left: 2px double blue;
}

Each side of the paragraph element uses a unique style and color, demonstrating the flexibility of individual border properties.

Border Styles

solid – A continuous line.
dashed – Broken dashes.
dotted – Circular dots.
double – Two parallel lines.
groove, ridge, inset, outset – 3D effects based on color shading.

Advanced Tip

You can also use border-radius to round corners or outline for non-space-consuming visual emphasis. Example:
border-radius: 10px; creates smooth, rounded corners.

Practical scenario
Add a red border to invalid inputs or a subtle outline around cards for separation.

Common pitfalls

Adding borders on hover/focus that change element size (layout shift).
Forgetting box-sizing so border changes width.
Misordering shorthand values (width, style, color).

Trade-off or test tip
Use outline to avoid layout shifts, but note it does not affect layout. Test focus styles with keyboard navigation.

Still so complicated?

Think of a border like the frame around a picture — it separates your content from the rest of the page and draws attention where needed.

Summary

Use border to define a visual frame around elements.
Combine width, style, and color in one shorthand rule.
Customize each side with individual border properties.
Enhance design with border-radius for curved edges.