Css style all borders

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 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!

      Источник

      CSS border-style Property

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

      • border-style: dotted solid double dashed;
        • top border is dotted
        • right border is solid
        • bottom border is double
        • left border is dashed
        • top border is dotted
        • right and left borders are solid
        • bottom border is double
        • top and bottom borders are dotted
        • right and left borders are solid
        • all four borders are dotted

        Default value:	none
        Inherited:	no
        Animatable:	no. Read about animatable
        Version:	CSS1
        JavaScript syntax:	object.style.borderStyle=»dotted double» 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
        none	Default value. Specifies no border	Demo ❯
        hidden	The same as «none», except in border conflict resolution for table elements	Demo ❯
        dotted	Specifies a dotted border	Demo ❯
        dashed	Specifies a dashed border	Demo ❯
        solid	Specifies a solid border	Demo ❯
        double	Specifies a double border	Demo ❯
        groove	Specifies a 3D grooved border. The effect depends on the border-color value	Demo ❯
        ridge	Specifies a 3D ridged border. The effect depends on the border-color value	Demo ❯
        inset	Specifies a 3D inset border. The effect depends on the border-color value	Demo ❯
        outset	Specifies a 3D outset border. The effect depends on the border-color value	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

        Example

        Example

        Example

        Example

        Example

        Example

        Example

        Set different borders on each side of an element:

        Related Pages

        

        COLOR PICKER

        

        

        Report Error

        If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

        Thank You For Helping Us!

        Your message has been sent to W3Schools.

        Top Tutorials

        Top References

        Top Examples

        Get Certified

        W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

        Источник