CSS Borders Explained – Style, Width, and Color

CSS Borders Explained – Style, Width, and Color

CSS Borders Explained – Style, Width, and Color | TipsInLearning
Home CSS Course CSS Borders
CSS Lesson 6 of 12

CSS Borders Explained

Master CSS borders with complete control over width, style, and color. Learn the border shorthand property, all 9 border-style values, border-radius for rounded corners, and individual side borders. Build polished, professional UIs with advanced border techniques.

12 min read
Beginner
CSS Box Model
CSS Course
In This Lesson
12 min read Beginner
Progress0/12
Borders are one of the most visible CSS properties. A well-designed border can make an element pop, draw attention, or create visual separation. Understanding width, style, and color separately first — then combining them with the shorthand — will make you confident with borders. And border-radius is what makes modern, friendly interfaces possible.
What You'll Learn
Border width with all supported units
All 9 border-style values explained
Border color in all formats (keywords, hex, rgb)
The powerful border shorthand property
Individual border sides (top, right, bottom, left)
Rounded corners with border-radius

What is a Border?

A border is a line that appears around the edge of an HTML element. It sits between the element's padding and margin (the CSS box model). Borders are used to:

  • Separate content — visually define where one element ends
  • Draw attention — highlight important content with colored borders
  • Create rounded corners — using border-radius
  • Polish the design — make layouts look modern and professional

Width

Controls how thick the border is — px, em, rem, or thin/thick keywords.

Style

The border pattern — solid, dashed, dotted, double, groove, ridge, etc.

Color

The border color — any CSS color: keywords, hex, rgb, hsl, or transparent.

Radius

Rounds the corners — from subtle curves to perfect circles.

Border Width

The border-width property sets how thick the border is. You can use pixels, ems, rems, or the keywords thin, medium, and thick.

CSS — Border Width Examples
div {
  border-width: 3px;  /* pixels */
}

p {
  border-width: 0.2em;  /* em units */
}

.box1 {
  border-width: thin;  /* keyword */
}

.box2 {
  border-width: medium;
}

.box3 {
  border-width: thick;
}
Most common units: px (pixels — most predictable), em (scaled to font size), rem (scaled to root font size). Keywords thin (~1px), medium (~3px), thick (~5px) are browser defaults and less predictable.

Border Style

The border-style property defines the appearance of the border. You must set a style or the border won't show at all — even if you've set width and color.

All 9 border-style values:

CSS — All Border Styles
.s-none { border: 3px none #2563eb; }  /* no border */
.s-solid { border: 3px solid #2563eb; }  /* solid line */
.s-dashed { border: 3px dashed #2563eb; }  /* dashes */
.s-dotted { border: 3px dotted #2563eb; }  /* dots */
.s-double { border: 3px double #2563eb; }  /* double line */
.s-groove { border: 3px groove #2563eb; }  /* carved in */
.s-ridge { border: 3px ridge #2563eb; }  /* raised out */
.s-inset { border: 3px inset #2563eb; }  /* pressed in */
.s-outset { border: 3px outset #2563eb; }  /* pushed out */

Visual examples:

none
solid
dashed
dotted
double
groove
ridge
inset
outset
Most used in practice: solid (90% of borders), dashed, dotted. The 3D effects (groove, ridge, inset, outset) are rarely seen in modern designs.

Border Color

The border-color property sets the border color. Any CSS color format works: keywords, hex, rgb, rgba, hsl, or the special keyword transparent.

CSS — Border Color Formats
.c1 { border-color: red; }  /* keyword */
.c2 { border-color: #2563eb; }  /* hex */
.c3 { border-color: rgb(37, 99, 235); }  /* rgb */
.c4 { border-color: rgba(37, 99, 235, 0.5); }  /* semi-transparent */
.c5 { border-color: hsl(217, 95%, 54%); }  /* hsl */
.c6 { border-color: transparent; }  /* invisible */

Border Shorthand

Instead of writing three separate properties, use the border shorthand to set width, style, and color in one line. This is the most common way to write borders in practice.

CSS — Border Shorthand
.box {
  /* border: width style color; */
  border: 2px solid #2563eb;
}

.card {
  border: 3px dashed #7c3aed;
}

.input {
  border: 1px solid #cbd5e1;
}
Browser Output
2px solid blue
3px dashed purple
1px solid gray
Order

Width → Style → Color

The order is fixed: border: 2px solid blue; Order doesn't matter between the values, but this is the convention.

Required

Style is Mandatory

You must include the style or the border won't display. Width and color are optional if a default applies.

Applies All Sides

All Sides Equally

The border shorthand applies the same border to all four sides. Use individual properties for different sides.

Individual Border Sides

You can style each side (top, right, bottom, left) separately using border-top, border-right, border-bottom, and border-left.

CSS — Individual Border Sides
.box {
  border-top: 4px solid #2563eb;
  border-right: 4px dashed #7c3aed;
  border-bottom: 4px dotted #06b6d4;
  border-left: 4px solid #059669;
}
Browser Output
Four different borders
Pro tip: You can also use shorthands for individual sides. For example: border-top-width, border-top-style, border-top-color for precise control.

Border Radius

The border-radius property rounds the corners of an element. It's what makes modern, friendly-looking designs possible. Set a radius value (px, em, rem, %) and corners curve smoothly.

CSS — Border Radius Examples
.r1 {
  border-radius: 8px;  /* all corners equally */
  border: 2px solid #2563eb;
  padding: 1rem;
}

.r2 {
  border-radius: 20px;  /* more rounded */
  border: 2px solid #7c3aed;
}

.r3 {
  border-radius: 50%;  /* perfect circle */
  width: 100px;
  height: 100px;
  border: 3px solid #06b6d4;
}

.r4 {
  /* different radius per corner */
  border-radius: 10px 20px 30px 40px;  /* TL TR BR BL */
  border: 2px solid #059669;
}
Browser Output
8px radius
20px radius
Circle
Individual corners

Individual Corner Radius

Use specific properties to round individual corners: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Or use the shorthand with four values: border-radius: 10px 20px 30px 40px; applies to top-left, top-right, bottom-right, bottom-left in that order.

Working Examples

Example 1: Simple Card with Border

HTML + CSS — Card with Border
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .card {
      border: 2px solid #2563eb;
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 300px;
      background: #f8fafc;
    }
  </style>
</head>
<body>
  <div class="card">
    <h3>My Card</h3>
    <p>This is a styled card with a border and rounded corners.</p>
  </div>
</body>
</html>

Example 2: Input Field with Focus Border

HTML + CSS — Input with Focus State
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    input {
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 16px;
    }
    
    input:focus {
      border: 2px solid #2563eb;
      outline: none;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Click me to see focus border">
</body>
</html>

Example 3: Colored Top Border

HTML + CSS — Top Border Accent
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .alert {
      border-top: 4px solid #dc2626;
      background: #fef2f2;
      padding: 1rem;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="alert">
    <p>This is an alert! Notice the colored top border.</p>
  </div>
</body>
</html>
Challenge — Create Your Own Borders
1Create a box with a 3px solid blue border and 16px border-radius
2Create a circle by using border-radius: 50% on a square element
3Create an input field with a 1px gray border that turns 2px blue on focus
4Create different borders on each side (top, right, bottom, left) and observe the result
5Experiment with all 9 border-style values — which ones look best for your design?
Lesson Summary
WWidth — set with px, em, rem, or keywords (thin/medium/thick)
SStyle — 9 options: solid, dashed, dotted, double, groove, ridge, inset, outset, none
CColor — any CSS color format: keywords, hex, rgb, rgba, hsl, transparent
BBorder shorthand — border: width style color; applies to all sides
SSides — use border-top, border-right, border-bottom, border-left for individual control
RRadius — rounds corners with border-radius; use 50% to create circles

CSS Borders Questions

Common questions about borders:

Why doesn't my border show even though I set a color and width?
You forgot the style. The border-style is required. A border needs all three parts: width, style, and color. If you skip the style (e.g., border: 2px #2563eb; without "solid"), the browser ignores the entire rule because it doesn't know how to draw the line — solid? dashed? The shorthand border: 2px solid #2563eb; always works.
Can I make rounded corners on just some sides?
Yes. Use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or shorten with four values: border-radius: 10px 0 0 10px; (top-left only). Common trick: border-radius: 50% 0; creates a half-circle.
What's the difference between border-width: thin/medium/thick vs pixels?
Keywords are browser defaults: thin ≈ 1px, medium ≈ 3px, thick ≈ 5px (but exact values vary by browser). Pixels are predictable and recommended. Use 2px, 3px instead. Keywords exist for compatibility but give less control.
How do I make a perfect circle using border-radius?
Use border-radius: 50% on an element with equal width and height. Example: .circle { width: 100px; height: 100px; border-radius: 50%; border: 2px solid blue; } creates a 100×100px blue circle.
Can I use different colors on different sides of the border?
Yes, use individual properties: border-top-color, border-right-color, border-bottom-color, border-left-color. Or combine side shorthands: border-top: 2px solid red; border-right: 2px solid blue; etc.
What's the best border-style for modern designs?
solid (90%+ of real sites), followed by dashed and dotted. The 3D effects (groove, ridge, inset, outset) look dated. Use solid for clean, modern designs. Dashed/dotted work well for accent borders or special states (errors, focus).

Post a Comment