Border inline style css

border-inline-style

The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style , or border-left-style and border-right-style properties depending on the values defined for writing-mode , direction , and text-orientation .

Try it

The border style in the other dimension can be set with border-block-style , which sets border-block-start-style , and border-block-end-style .

Syntax

/* values */ border-inline-style: dashed; border-inline-style: dotted; border-inline-style: groove; /* Global values */ border-inline-style: inherit; border-inline-style: initial; border-inline-style: revert; border-inline-style: revert-layer; border-inline-style: unset;

Values

The line style of the border. See border-style .

Formal definition

Formal syntax

border-inline-style = 'border-top-style'>1,2>

Examples

HTML Content

div> p class="exampleText">Example text p> div> 

CSS Content

div < background-color: yellow; width: 120px; height: 120px; > .exampleText < writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; >

Specifications

Browser compatibility

See also

Found a problem with this page?

Last modified: Apr 5, 2022 , by MDN contributors

CSS

The border-inline-start-style CSS property defines of logical an element, which maps to physical depending on element’s writing mode, directionality, and

The border-inline-start-width CSS property defines of logical an element, which maps to physical depending on element’s writing mode, directionality, and

The border-inline-width CSS property defines of logical borders an element, which maps to physical depending on element’s writing mode, directionality,

The border-left shorthand CSS property sets all properties of element’s As with all shorthand properties, border-left always sets the values of that can

Источник

CSS border-inline Property

Set the style, color and width of the borders for different elements in the inline direction:

h1 <
border-inline: 5px solid red;
>

h2 border-inline: 4px dotted blue;
>

Definition and Usage

The border-inline property is a shorthand property for these properties:

If values for color or width are omitted, default values will be used.

The CSS border-inline property is very similar to CSS property border , but the border-inline property is dependent on the inline direction.

Note: The related CSS properties writing-mode , text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline property. For pages in English, inline direction is left to right and block direction is downward.

Default value:	medium none color
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.borderInline=»dashed hotpink 10px» 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
border-inline-width	Specifies the width of the borders in the inline direction. Default value is «medium»	Demo ❯
border-inline-style	Specifies the style of the borders in the inline direction. Default value is «none»	Demo ❯
border-inline-color	Specifies the color of the borders in the inline direction. Default value is the color of the text	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

With writing-mode property

The position of the borders at the start and end in the inline direction is affected by the writing-mode property:

Источник

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.

      Источник

      border-inline

      The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

      Try it

      The physical borders to which border-inline maps depends on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top and border-bottom or border-right , and border-left properties, depending on the values defined for writing-mode , direction , and text-orientation .

      The borders in the other dimension can be set with border-block , which sets border-block-start , and border-block-end .

      Constituent properties

      This property is a shorthand for the following CSS properties:

      Syntax

      border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; /* Global values */ border-inline: inherit; border-inline: initial; border-inline: revert; border-inline: revert-layer; border-inline: unset; 

      Values

      The border-inline is specified with one or more of the following, in any order:

      The width of the border. See border-width .

      The line style of the border. See border-style .

      Formal definition

      • border-inline-width : medium
      • border-inline-style : none
      • border-inline-color : currentcolor
      • border-inline-width : absolute length; 0 if the border style is none or hidden
      • border-inline-style : as specified
      • border-inline-color : computed color
      • border-inline-color : by computed value type
      • border-inline-style : discrete
      • border-inline-width : by computed value type

      Formal syntax

      Источник