Skip to main content

CSS Borders

div.all-borders {
  border: 1px solid black;
}
http://127.0.0.1:5500/index.html

I have borders on all sides.

div.bottom-border {
  border-bottom: 1px solid red;
}

Output​

http://127.0.0.1:5500/index.html

I have a red bottom border.

div.rounded-borders {
  border: 1px solid black;
  border-radius: 10px;
}

Output​

http://127.0.0.1:5500/index.html

I have rounded borders.

div.left-border {
  border-left: 1px solid blue;
}

Output​

http://127.0.0.1:5500/index.html

I have a blue left border.

CSS Border Style​

p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.none { border-style: none; }
p.hidden { border-style: hidden; }
p.mix { border-style: dotted dashed solid double; }

Output​

http://127.0.0.1:5500/index.html

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A mixed border.

CSS Border Width​

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Output​

http://127.0.0.1:5500/index.html

5px border-width

Medium border-width

2px border-width

Thick border-width

CSS Border Color​

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Output​

http://127.0.0.1:5500/index.html

Red border

Green border

Blue border

CSS Border - Individual Sides​

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Output​

http://127.0.0.1:5500/index.html

Different Border Styles

p {
  border-style: dotted solid;
}

Output​

http://127.0.0.1:5500/index.html

Different Border Styles

CSS Border - Shorthand Property​

p {
  border: 5px solid red;
}

Output​

http://127.0.0.1:5500/index.html

Some text

p {
  border-left: 6px solid red;
}

Output​

http://127.0.0.1:5500/index.html

Some text

p {
  border-bottom: 6px solid red;
}

Output​

http://127.0.0.1:5500/index.html

Some text

CSS Rounded Borders​

p {
  border: 2px solidred;
  border-radius: 5px;
}

Output​

http://127.0.0.1:5500/index.html

Normal border

p {
  border: 2px solid red;
  border-radius: 15px;
}

Output​

http://127.0.0.1:5500/index.html

Round border

p {
  border: 2px solid red;
  border-radius: 25px;
}

Output​

http://127.0.0.1:5500/index.html

Rounder border

p {
  border: 2px solid red;
  border-radius: 50px;
}

Output​

http://127.0.0.1:5500/index.html

Roundest border