Css border color weight

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset; 

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element’s content.
• According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

• border-width : as each of the properties of the shorthand:
  • border-top-width : medium
  • border-right-width : medium
  • border-bottom-width : medium
  • border-left-width : medium
  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-top-color : currentcolor
  • border-right-color : currentcolor
  • border-bottom-color : currentcolor
  • border-left-color : currentcolor
  • border-width : as each of the properties of the shorthand:
    • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
    • border-left-width : the absolute length or 0 if border-left-style is none or hidden
    • border-right-width : the absolute length or 0 if border-right-style is none or hidden
    • border-top-width : the absolute length or 0 if border-top-style is none or hidden
    • border-bottom-style : as specified
    • border-left-style : as specified
    • border-right-style : as specified
    • border-top-style : as specified
    • border-bottom-color : computed color
    • border-left-color : computed color
    • border-right-color : computed color
    • border-top-color : computed color
    • border-color : as each of the properties of the shorthand:
      • border-bottom-color : a color
      • border-left-color : a color
      • border-right-color : a color
      • border-top-color : a color
      • border-bottom-width : a length
      • border-left-width : a length
      • border-right-width : a length
      • border-top-width : a length

      Formal syntax

      border =
      ||
      ||

      =
      |
      thin |
      medium |
      thick

      =
      none |
      hidden |
      dotted |
      dashed |
      solid |
      double |
      groove |
      ridge |
      inset |
      outset

      Examples

      Setting a pink outset border

      HTML

      div>I have a border, an outline, and a box shadow! Amazing, isn't it?div> 

      CSS

      div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; > 

      Result

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on Jul 18, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      CSS Border

      In this chapter, we will speak about borders and how we can give styles to them. We can give width, style and color to the border.

      Example of the border property:

      html> html> head> title>Title of the document title> head> body> p style="border:3px dotted #1c87c9"> Example with a blue dotted border. p> p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border. p> p style="border:3px solid #8ebf42"> Example with a green solid border. p> body> html>

      Result

      

      Border Width

      The border-width property sets the width of a border.

      The width can be specified in pixels. It can also be specified by one of the three pre-defined values: medium, thin, or thick.

      You cannot use the «border-width» property alone. It will not work. Use «border-style» for setting the borders first.

      Example of the border-width property:

      html> html> head> style> p.border-width-1 < border-style: solid; border-width: 6px; > p.border-width-2 < border-style: dotted; border-width: 1px; > p.border-width-3 < border-style: dotted; border-width: medium; > p.border-width-4 < border-style: double; border-width: 8px; > p.border-width-5 < border-style: double; border-width: thick; > p.border-width-6 < border-style: solid; border-width: 3px 12px 6px 18px; > style> head> body> h2>The border-width Property h2> p class="border-width-1">Example with border-width. p> p class="border-width-2">Example with border-width. p> p class="border-width-3">Example with border-width. p> p class="border-width-4">Example with border-width. p> p class="border-width-5">Example with border-width. p> p class="border-width-6">Example with border-width. p> body> html>

      Border Color

      The border-color property is used to set the color of a border. The color can be set by:

      • name — specifies a color name, like «red»
      • RGB — specifies a RGB value, like «rgb(255,0,0)»
      • Hex — specifies a hex value, like «#ff0000»

      You cannot use the «border-color» property alone. It will not work. Use «border-style» for setting the borders first.

      Usually, we write these three properties together in one row.

      Example of the border-color property:

      html> html> head> style> p.color-one < border-style: solid; border-color: blue; > p.color-two < border-style: dotted; border-color: yellow; > p.color-three < border-style: solid; border-color: DarkBlue orange green red; > style> head> body> h2>The border-color Property h2> p class="color-one">Example with blue solid border-color. p> p class="color-two">Example with yellow dotted border-color. p> p class="color-three">Example with multicolor border-color. p> body> html>

      You can try other examples with our CSS Maker tool.

      Border Style

      The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have from one to four values. So, each side can have its value. The default value of border-style is none.

      Border-style has the following values:

      Some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.

      CSS Border for individual sides

      CSS provides properties that specify each border (right, left, bottom and top).

      The border-style property can have 4 values, for example, border-style: dotted solid double dashed; where the top border is dotted, the bottom border is double, the right border is solid, and the left border is dashed.

      The border-style property can have 3 values, for example, border-style: dotted solid double; where the top border is dotted, the bottom border is double, and the right and left borders are solid.

      The border-style property can have 2 values, for example, border-style: dotted solid; where the right and left borders are solid, and the top and bottom borders are dotted. And, of course, this property can have only 1 value, for example, border-style: solid; where all the sides are solid.

      Example of the border properties for individual sides:

      html> html> head> style> p < border-top-style: double; border-right-style: solid; border-bottom-style: dotted; border-left-style: groove; > style> head> body> p>Example with border individual sides. p> body> html>

      CSS border as a shorthand property

      The CSS border property is a shorthand property for the following individual border properties:

      • The CSS border-width property, which sets the width of all four sides of an element’s border.
      • The CSS border-style property, which sets the style of all four sides of an element’s borders.
      • The CSS border-color property, which sets the color of all four sides of an element’s border.

      Example of the border shorthand property:

      html> html> head> style> p.border-all < border: 3px solid red; > p.border-left < border-left: 4px solid blue; background-color: #dcdcdc; > p.border-top < border-top: 6px solid green; background-color: #dcdcdc; > style> head> body> h2>The border Shorthand Property h2> p class="border-all">Example with a shorthand property for border-width, border-style, and border-color. p> p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color. p> p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color. p> body> html>

      Rounded borders

      Using the CSS border-radius property, you can add rounded borders to an element.

      Example of the border-radius property:

      html> html> head> style> p.normal < border: 3px solid blue; > p.round-one < border: 3px solid blue; border-radius: 6px; > p.round-two < border: 3px solid blue; border-radius: 9px; > p.round-three < border: 3px solid blue; border-radius: 15px; > style> head> body> h2>The border-radius Property h2> p class="normal">Example with normal border p> p class="round-one">Example with round border p> p class="round-two">Example with rounder border p> p class="round-three">Example with roundest border p> body> html>

      The difference between borders and outlines

      Outlines and borders are usually confusing because they are very similar. But there are differences between these two:

      • Outlines are drawn outside of the content of an element, so they don’t take up space.
      • Outlines usually are rectangular, although they don’t have to be.

      Источник