border | CSS-Tricks - CSS-Tricks

The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to.

.box {
  border: 3px solid red;
  height: 200px;
  width: 200px;
}

Syntax

border: <line-width> || <line-style> || <color>

Values

The border property accepts one or more of the following values in combination:

border-width: Specifies the thickness of the border.
- : A numeric value measured in px, em, rem, vh and vw units.
- thin: The equivalent of 1px
- medium: The equivalent of 3px
- thick: The equivalent of 5px
border-style: Specifies the type of line drawn around the element, including:
- solid: A solid, continuous line.
- none (default): No line is drawn.
- hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
- dashed: A line that consists of dashes.
- dotted: A line that consists of dots.
- double: Two lines are drawn around the element.
- groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
- ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
- inset: Adds a split tone to the line that makes the element appear slightly depressed.
- outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
border-color: Specifies the color of the border and accepts all valid color values.

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

Browser support

You can count on excellent support for the border property across all browsers.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Yes	Yes	Yes	3.5+	4+	Yes	Yes

More information

Almanac on Sep 17, 2021

border-block

.element { border-block: 5px solid #f8a100; }

Joel Olawanle

Almanac on May 20, 2022

border-boundary

.element { border-boundary: display; }

Geoff Graham

Almanac on May 20, 2022

border-collapse

.element { border-collapse: separate; }

border-collapse borders

Sara Cope

Almanac on Dec 5, 2022

border-image

.element { border-image: url(border.png) 25 25 round; }

Marie Mosley

Almanac on Sep 17, 2021

border-inline

.element { border-inline: 5px solid #f8a100; }

Joel Olawanle

Almanac on Nov 10, 2022

border-radius

.element { border-radius: 10px; }

Sara Cope

Almanac on Nov 17, 2022

border-spacing

.element { border-spacing: 5px; }

Chris Coyier

Comments

Druid of Lûhn

# December 18, 2011

Any more about borders?
border-radius, …

Enrique de Larrazabal

Permalink to comment# March 14, 2013

border-radius is a different property, it is not included in the shorthand border, but if you are looking for it, you can also find it in the almanac: https://css-tricks.com/almanac/properties/b/border-radius/

John Lueders

# April 9, 2013

Hi Chris,

Would like to see the list of available border style properties here. Believe that would be helpful.

hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Also, you insight/opinion on these styles. I see solid, dotted, dashed frequently but not the others…are they going out of style?…are they being deprecated?

All the best,

John

C.M.

Permalink to comment# October 5, 2015

Who is this Chris you are trying to speak to?

cyran

# May 15, 2014

how this site is really helpful but am in agreement with john what about the other styles hidden, dotted, dashed, solid, double, groove, ridge, inset, outset?
why are they not included.

Robbee

# July 7, 2014

Thanks for the help. This site is good when I have trouble making the code right.

Farhan

# August 22, 2017

this is really very helpfull, thanks guys

Nyangayenzou Ashley Dube

# June 22, 2019

i want a shadow for my border-bottom. Help

Geoff Graham

Permalink to comment# June 24, 2019

Hey there and thanks for reaching out! Both border and box-shadow are properties that are applied to an element. They work pretty well together, too. :)

For example, you can have an orange bottom border on a box, then apply a dark box shadow on it:

.my-element { height: 100px; width: 100px; border-bottom: orange; box shadow: 3px 3px 3px #000; /* Sets a black shadow to the right and bottom and blurs it a smidge */ }

Yadley

# September 16, 2020

Hey Sara, thanks or this great article. Would you happen to know if, by any chance, it is possible to add a height property to a border? Something like https://prnt.sc/uiprv7

Abhishek Verma

# December 28, 2020

I wanted to add a gradient styled color for the border on my website. Anyone knows how to do it.

Jessica

# January 3, 2021

Hi Guys. I’d like to know if it’s possible to have percentage colors inside a border with CSS only? Like 3 colors separated… 2% red, 7% green, 91% gray. Something like that but not gradient. Like a progress…

Anuraag Shukla

# July 13, 2021

I have to ask shouldn’t the first example be a square?

(not being a nitpicker, just confused)

Jochanan

# October 22, 2021

I’d like to know how you changed the appearance of the scroll bar on the right.

WoodyP

# February 10, 2022

Hello,
I am trying to use the Double edge.
How can you indicate the thickness of the lines and the space, in a distinct way?
I searched all over the web, I only found a link that states “border-double-thickness” but only applies it online.
I kept looking for “border-double-thickness”, but I couldn’t find anything.
This is the link
https://www.antennahouse.com/hubfs/xsl-fo-sample/block/axf-border-double-thickness-1.pdf?hsLang=en#

Do you know how to indicate how to do it?
Thank you