border

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;
}

Values

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

border:  <border-width> || <border-style> || <color>
  • border-width: Specifies the thickness of the border.
    • <length>: 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 (default): A solid, continuous line.
    • none: 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.
  • color: Specifies the color of the border and accepts <rgb()>, <rgba()>, <code><hsl()>, <hsla()>, <hex-color>, <named-color>, currentcolor and <deprecated-system-color>

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:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

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

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

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

  • border-collapse: Specifies the spacing between borders on the <table> element.
  • border-image: Allows the use of an image to draw the border instead of a solid color.
  • border-radius: Provides control for rounded corners.

More Information

Comments

  1. User Avatar
    Druid of Lûhn
    Permalink to comment#

    Any more about borders?
    border-radius, …

  2. User Avatar
    John Lueders
    Permalink to comment#

    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

  3. User Avatar
    cyran

    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.

  4. User Avatar
    Robbee

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

  5. User Avatar
    Farhan
    Permalink to comment#

    this is really very helpfull, thanks guys

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag