CSS Borders

CSS CODES & EXAMPLES

CSS Borders

Learn how to create, style and customize borders around HTML elements. Explore border styles, width, color, radius, individual sides, outlines and practical website designs.

← CSS Backgrounds Start Learning →

What are CSS Borders?

Create visible boundaries around HTML elements

CSS borders are used to create a visible line around an element. Borders can be customized using different styles, colors, widths and corner radii.

Important Properties: border border-style border-width border-color border-radius outline

Basic Border

Create a simple border

The simplest way to create a border is to use the border shorthand property.

basic-border.css

.box {
  border: 2px solid #1769d5;
}

Basic Border

Border Style

Choose different border patterns

The border-style property defines the style of the border.

border-style.css

.solid {
  border: 3px solid #1769d5;
}

.dashed {
  border: 3px dashed #1769d5;
}

.dotted {
  border: 3px dotted #1769d5;
}

.double {
  border: 5px double #1769d5;
}

solid Continuous line

dashed Dashed line

dotted Dotted line

double Double line

Border Width

Control the thickness of a border

border-width.css

.thin {
  border: 1px solid #1769d5;
}

.medium {
  border: 3px solid #1769d5;
}

.thick {
  border: 6px solid #1769d5;
}

1px

3px

6px

Border Color

Change the color of your border

border-color.css

.box {
  border-style: solid;
  border-width: 3px;
  border-color: #1769d5;
}

Blue

Green

Orange

Purple

Individual Borders

Style each side independently

CSS allows you to control the top, right, bottom and left borders separately.

Border Radius

Create rounded corners

The border-radius property rounds the corners of an element.

border-radius.css

.card {
  border: 2px solid #1769d5;
  border-radius: 20px;
}

.circle {
  border-radius: 50%;
}

0px

10px

25px

50%

Individual Corner Radius

Round specific corners

corner-radius.css

.box {
  border-radius:
    30px
    10px
    30px
    10px;
}

Custom Rounded Corners 30px • 10px • 30px • 10px

CSS Outline

Create an external line around an element

An outline is similar to a border but it does not take up space in the normal box layout.

outline.css

.box {
  border: 2px solid #1769d5;
  outline: 3px dashed #f59e0b;
  outline-offset: 6px;
}

Border + Outline

Border Shorthand

Combine width, style and color

border-shorthand.css

.box {
  border: 3px solid #1769d5;
}

3px + solid + #1769d5

The shorthand combines three values: border-width, border-style and border-color.

Border Hover Effect

Create interactive cards using CSS

border-hover.css

.card {
  border: 2px solid #e2e8f0;
  transition: .3s;
}

.card:hover {
  border-color: #1769d5;
  transform: translateY(-5px);
}

HOVER ME

Interactive Card

Move your mouse over this card to see the border hover effect.

Border Button

Create modern outlined buttons

button-border.css

.btn {
  padding: 12px 20px;
  border: 2px solid #1769d5;
  border-radius: 8px;
  color: #1769d5;
  background: white;
}

.btn:hover {
  background: #1769d5;
  color: white;
}

Enroll Now

Professional Card Border

Practical website design example

card-border.css

.card {
  padding: 25px;

  background: white;

  border:
    1px solid
    #e4eaf1;

  border-radius: 16px;

  transition: .3s;
}

.card:hover {
  border-color: #1769d5;

  box-shadow:
    0 12px 30px
    rgba(23,105,213,.12);
}

✓

FEATURED COURSE

Certificate in Computer Application

Professional computer education with practical learning and career-focused skills.

View Course →

Image Border

Create attractive image containers

image-border.css

img {
  width: 220px;
  height: 220px;

  object-fit: cover;

  border:
    5px solid
    #1769d5;

  border-radius: 50%;

  padding: 5px;
}

SNCEC

CSS Borders Live Preview

Run a complete border example

LIVE PREVIEW

CSS Borders Quick Reference

Important properties at a glance

Property	Example	Purpose
border	`border: 2px solid blue;`	Shorthand border
border-width	`border-width: 3px;`	Controls thickness
border-style	`border-style: dashed;`	Controls border pattern
border-color	`border-color: blue;`	Controls border color
border-radius	`border-radius: 15px;`	Rounds corners
outline	`outline: 2px solid red;`	Creates external outline
outline-offset	`outline-offset: 5px;`	Creates space around outline