Css border size code

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-width Property

      The border-width property sets the width of an element’s four borders. This property can have from one to four values.

      • border-width: thin medium thick 10px;
        • top border is thin
        • right border is medium
        • bottom border is thick
        • left border is 10px
        • top border is thin
        • right and left borders are medium
        • bottom border is thick
        • top and bottom borders are thin
        • right and left borders are medium
        • all four borders are thin

        Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

        Default value:	medium
        Inherited:	no
        Animatable:	yes. Read about animatable Try it
        Version:	CSS1
        JavaScript syntax:	object.style.borderWidth=»1px 5px» Try it

        Browser Support

        The numbers in the table specify the first browser version that fully supports the property.

        CSS Syntax

        Property Values

        Value	Description	Demo
        medium	Specifies a medium border. This is default	Demo ❯
        thin	Specifies a thin border	Demo ❯
        thick	Specifies a thick border	Demo ❯
        length	Allows you to define the thickness of the border. Read about length units	Demo ❯
        initial	Sets this property to its default value. Read about initial
        inherit	Inherits this property from its parent element. Read about inherit

        More Examples

        Example

        Set the width of the borders to medium:

        Example

        Set the width of the borders to thick:

        Example

        Set the width of the borders to 1px:

        Example

        Set the width of the borders to 15px:

        Example

        Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

        Источник

        border-width

        The border-width shorthand CSS property sets the width of an element’s border.

        Try it

        Constituent properties

        This property is a shorthand for the following CSS properties:

        Syntax

        /* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* values */ border-width: 4px; border-width: 1.2rem; /* top and bottom | left and right */ border-width: 2px 1.5em; /* top | left and right | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global values */ border-width: inherit; border-width: initial; border-width: revert; border-width: revert-layer; border-width: unset; 

        The border-width property may be specified using one, two, three, or four values.

        • When one value is specified, it applies the same width to all four sides.
        • When two values are specified, the first width applies to the top and bottom, the second to the left and right.
        • When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
        • When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).

        Values

        Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

        Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

        Formal definition

        • border-top-width : medium
        • border-right-width : medium
        • border-bottom-width : medium
        • border-left-width : medium
        • 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-width : a length
        • border-left-width : a length
        • border-right-width : a length
        • border-top-width : a length

        Formal syntax

        Examples

        A mix of values and lengths

        HTML

        p id="one-value">one value: 6px wide border on all 4 sidesp> p id="two-values"> two different values: 2px wide top and bottom border, 10px wide right and left border p> p id="three-values"> three different values: 0.3em top, 9px bottom, and zero width right and left p> p id="four-values"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left p> 

        CSS

        #one-value  border: ridge #ccc; border-width: 6px; > #two-values  border: solid red; border-width: 2px 10px; > #three-values  border: dotted orange; border-width: 0.3em 0 9px; > #four-values  border: solid lightgreen; border-width: thin medium thick 1em; > p  width: auto; margin: 0.25em; padding: 0.25em; > 

        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 Feb 21, 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 Borders

        The CSS border properties allow you to specify the style, width, and color of an element’s border.

        I have borders on all sides.

        I have a red bottom border.

        I have a blue left border.

        CSS Border Style

        The border-style property specifies what kind of border to display.

        The following values are allowed:

        • dotted — Defines a dotted border
        • dashed — Defines a dashed border
        • solid — Defines a solid border
        • double — Defines a double border
        • groove — Defines a 3D grooved border. The effect depends on the border-color value
        • ridge — Defines a 3D ridged border. The effect depends on the border-color value
        • inset — Defines a 3D inset border. The effect depends on the border-color value
        • outset — Defines a 3D outset border. The effect depends on the border-color value
        • none — Defines no border
        • hidden — Defines a hidden border

        The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

        Example

        Demonstration of the different border styles:

        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.

        Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

        Источник