Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    border-image-width

    Summary

    The border-image-width CSS property defines the width of the border. If specified, it overrides the border-width property.

    • Initial value 1
    • Applies to all elements, except table elements when border-collapse is collapse. It also applies to ::first-letter.
    • Inherited no
    • Percentages refer to the width or height of the border image area
    • Media visual
    • Computed value all lengths made absolute, otherwise as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: [ <length> | <percentage> | <number> | auto ]{1,4} 
    
    border-image-width: all                        /* One-value syntax */       E.g. border-image-width: 3;
    border-image-width: vertical horizontal        /* Two-value syntax */       E.g. border-image-width: 2em 3em;
    border-image-width: top horizontal bottom      /* Three-value syntax */     E.g. border-image-width: 5% 15% 10%;
    border-image-width: top right bottom left      /* Four-value syntax */      E.g. border-image-width: 5% 2em 10% auto;
    
    border-image-width: inherit
    

    where:

    width
    Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
    vertical
    Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
    horizontal
    Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
    top
    Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
    bottom
    Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
    right
    Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
    left
    Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
    inherit
    Is a keyword indicating that all four values are inherited from their parent's element calculated value.

    Values

     

    Action

    <!DOCTYPE html>
    
    <html>
       <head>
          <body>
             <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
             eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
             At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
             no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </body>
       </head>
    </html>
    

     

    p{
       border-image-source: url ("datei.png);
       border-image-slice:20px;
       border-image-width:20px;
       border-image-repeat: repeat;
       padding:10px
    }
    <length>
    Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
    <percentage>
    Represents the width of the border as a percentage of the element. The percentage must not be negative.
    <number>
    Represents a multiple of the computed value of the element's border-width property to be used as the border width. The number must not be negative.
    auto

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-image-width' in that specification.
    Candidate Recommendation Initial specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 15.0 13.0 (13.0) 11 15 6
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 13.0 (13.0) Not supported ? ?

    See also