Html border solid none

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.

  Источник

  border-style

  The border-style shorthand CSS property sets the line style for all four sides of an element’s border.

  Try it

  Constituent properties

  This property is a shorthand for the following CSS properties:

  Syntax

  /* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: revert; border-style: revert-layer; border-style: unset; 

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

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

  Each value is a keyword chosen from the list below.

  Values

  Describes the style of the border. It can have the following values:

  Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.

  Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed.

  Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side’s border-width .

  Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

  Displays a single, straight, solid line.

  Displays two straight lines that add up to the pixel size defined by border-width .

  Displays a border with a carved appearance. It is the opposite of ridge .

  Displays a border with an extruded appearance. It is the opposite of groove .

  Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like ridge .

  Displays a border that makes the element appear embossed. It is the opposite of inset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .

  Formal definition

  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-bottom-style : as specified
  • border-left-style : as specified
  • border-right-style : as specified
  • border-top-style : as specified

  Formal syntax

  border-style =
  

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

  Examples

  All property values

  Here is an example of all the property values.

  HTML

  pre class="b1">nonepre> pre class="b2">hiddenpre> pre class="b3">dottedpre> pre class="b4">dashedpre> pre class="b5">solidpre> pre class="b6">doublepre> pre class="b7">groovepre> pre class="b8">ridgepre> pre class="b9">insetpre> pre class="b10">outsetpre> 

  CSS

  pre  height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; > /* border-style example classes */ .b1  border-style: none; > .b2  border-style: hidden; > .b3  border-style: dotted; > .b4  border-style: dashed; > .b5  border-style: solid; > .b6  border-style: double; > .b7  border-style: groove; > .b8  border-style: ridge; > .b9  border-style: inset; > .b10  border-style: outset; > 

  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 Jun 30, 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.

  Источник

  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 fonts for firefox