• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Web Technology

      Web technology reference for developers

  • Guides
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • MDN Plus
    • Overview

      A customized MDN experience

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Already a subscriber?
  • Get MDN Plus
  1. References
  2. CSS
  3. CSS Backgrounds and Borders
  4. Border-image generator

Related Topics

  1. CSS
  2. Tutorials
  3. CSS basics
  4. CSS first steps
    1. CSS first steps overview
    2. What is CSS?
    3. Getting started with CSS
    4. How CSS is structured
    5. How CSS works
    6. Assessment: Styling a biography page
  5. CSS building blocks
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS selectors
    4. The box model
    5. Backgrounds and borders
    6. Handling different text directions
    7. Overflowing content
    8. CSS values and units
    9. Sizing items in CSS
    10. Images, media, and form elements
    11. Styling tables
    12. Debugging CSS
    13. Organizing your CSS
    14. Assessment: Fundamental CSS comprehension
    15. Assessment: Creating fancy letterheaded paper
    16. Assessment: A cool-looking box
  6. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  7. CSS layout
    1. CSS layout overview
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy layout methods
    12. Supporting older browsers
    13. Assessment: Fundamental layout comprehension
  8. Reference
  9. Modules
    1. Compositing and Blending
    2. CSS Animations
    3. CSS Backgrounds and Borders
    4. CSS Basic User Interface
    5. CSS Box Alignment
    6. CSS Box Model
    7. CSS Charsets
    8. CSS Colors
    9. CSS Multi-column Layout
    10. CSS Conditional Rules
    11. CSS Containment
    12. CSS Counter Styles
    13. CSS Display
    14. CSS Flexible Box Layout
    15. CSS Fonts
    16. CSS Fragmentation
    17. CSS Generated Content
    18. CSS Grid Layout
    19. CSS Images
    20. CSS Lists
    21. CSS Logical Properties and Values
    22. CSS Masking
    23. CSS Miscellaneous
    24. CSS Motion Path
    25. CSS Namespaces
    26. CSS Overflow
    27. CSS Paged Media
    28. CSS Positioned Layout
    29. CSS Ruby Layout
    30. CSS Scroll Snap
    31. CSS Scroll Snap Points
    32. CSS Scrollbars
    33. CSS Shapes
    34. CSS Table
    35. CSS Text
    36. CSS Text Decoration
    37. CSS Transforms
    38. CSS Transitions
    39. CSS Custom Properties for Cascading Variables
    40. CSS Writing Modes
    41. CSSOM View
    42. Filter Effects
    43. Media queries
    44. Paged media
  10. Properties
    1. -webkit-*
      1. -webkit-line-clamp
      2. -webkit-text-fill-color
      3. -webkit-text-stroke
      4. -webkit-text-stroke-color
      5. -webkit-text-stroke-width
    2. accent-color
    3. align-*
      1. align-content
      2. align-items
      3. align-self
      4. Experimental align-tracks
    4. all
    5. animation-*
      1. animation
      2. Experimental animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. Experimental animation-timeline
      11. animation-timing-function
    6. appearance
    7. aspect-ratio
    8. backdrop-filter
    9. backface-visibility
    10. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    11. block-size
    12. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    13. bottom
    14. box-*
      1. box-decoration-break
      2. box-shadow
      3. box-sizing
    15. break-*
      1. break-after
      2. break-before
      3. break-inside
    16. caption-side
    17. caret-color
    18. clear
    19. Deprecated clip
    20. clip-path
    21. color
    22. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. direction
    32. display
    33. empty-cells
    34. filter
    35. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    36. float
    37. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-stretch
      11. font-style
      12. font-synthesis
      13. font-variant
      14. font-variant-alternates
      15. font-variant-caps
      16. font-variant-east-asian
      17. font-variant-emoji
      18. font-variant-ligatures
      19. font-variant-numeric
      20. font-variant-position
      21. font-variation-settings
      22. font-weight
    38. forced-color-adjust
    39. gap
    40. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    41. hanging-punctuation
    42. height
    43. hyphenate-character
    44. hyphenate-limit-chars
    45. hyphens
    46. image-*
      1. image-orientation
      2. image-rendering
      3. Experimental image-resolution
    47. Deprecated ime-mode
    48. Experimental initial-letter
    49. Experimental initial-letter-align
    50. inline-size
    51. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    52. isolation
    53. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
      4. Experimental justify-tracks
    54. left
    55. letter-spacing
    56. line-*
      1. line-break
      2. line-height
      3. Experimental line-height-step
    57. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    58. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. Experimental margin-trim
    59. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    60. Experimental masonry-auto-flow
    61. math-*
      1. Experimental math-depth
      2. Experimental math-shift
      3. math-style
    62. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    63. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    64. mix-blend-mode
    65. object-fit
    66. object-position
    67. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. Experimental offset-position
      6. offset-rotate
    68. opacity
    69. order
    70. orphans
    71. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    72. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    73. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    74. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    75. page-*
      1. page-break-after
      2. page-break-before
      3. page-break-inside
    76. paint-order
    77. perspective
    78. perspective-origin
    79. place-*
      1. place-content
      2. place-items
      3. place-self
    80. pointer-events
    81. position
    82. print-color-adjust
    83. quotes
    84. resize
    85. right
    86. rotate
    87. row-gap
    88. Experimental ruby-align
    89. ruby-position
    90. scale
    91. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. Experimental scroll-timeline
      28. Experimental scroll-timeline-axis
      29. Experimental scroll-timeline-name
    92. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    93. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
    94. tab-size
    95. table-layout
    96. text-*
      1. text-align
      2. text-align-last
      3. text-combine-upright
      4. text-decoration
      5. text-decoration-color
      6. text-decoration-line
      7. Experimental text-decoration-skip
      8. text-decoration-skip-ink
      9. text-decoration-style
      10. text-decoration-thickness
      11. text-emphasis
      12. text-emphasis-color
      13. text-emphasis-position
      14. text-emphasis-style
      15. text-indent
      16. text-justify
      17. text-orientation
      18. text-overflow
      19. text-rendering
      20. text-shadow
      21. Experimental text-size-adjust
      22. text-transform
      23. text-underline-offset
      24. text-underline-position
    97. top
    98. touch-action
    99. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    100. transition-*
      1. transition
      2. transition-delay
      3. transition-duration
      4. transition-property
      5. transition-timing-function
    101. translate
    102. unicode-bidi
    103. user-select
    104. vertical-align
    105. visibility
    106. white-space
    107. widows
    108. width
    109. will-change
    110. word-break
    111. word-spacing
    112. writing-mode
    113. z-index
  11. Selectors
    1. Attribute selectors
    2. Class selectors
    3. ID selectors
    4. Type selectors
    5. Universal selectors
  12. Combinators
    1. Adjacent sibling combinator
    2. Child combinator
    3. Experimental Column combinator
    4. Descendant combinator
    5. General sibling combinator
    6. Selector list
  13. Pseudo-classes
    1. :active
    2. :any-link
    3. :autofill
    4. Experimental :blank
    5. :checked
    6. :current
    7. :default
    8. :defined
    9. :dir()
    10. :disabled
    11. :empty
    12. :enabled
    13. :first
    14. :first-child
    15. :first-of-type
    16. :focus
    17. :focus-visible
    18. :focus-within
    19. :fullscreen
    20. :future
    21. :has()
    22. :host
    23. :host-context()
    24. :host()
    25. :hover
    26. :in-range
    27. :indeterminate
    28. :invalid
    29. :is()
    30. :lang()
    31. :last-child
    32. :last-of-type
    33. :left
    34. :link
    35. :local-link
    36. :modal
    37. :not()
    38. :nth-child()
    39. :nth-col()
    40. :nth-last-child()
    41. :nth-last-col()
    42. :nth-last-of-type()
    43. :nth-of-type()
    44. :only-child
    45. :only-of-type
    46. :optional
    47. :out-of-range
    48. :past
    49. :paused
    50. :picture-in-picture
    51. :placeholder-shown
    52. :playing
    53. :read-only
    54. :read-write
    55. :required
    56. :right
    57. :root
    58. :scope
    59. :target
    60. :target-within
    61. Experimental :user-invalid (:-moz-ui-invalid)
    62. Experimental :user-valid (:-moz-ui-valid)
    63. :valid
    64. :visited
    65. :where()
  14. Pseudo-elements
    1. ::after
    2. ::backdrop
    3. ::before
    4. ::cue
    5. ::cue-region
    6. ::file-selector-button
    7. ::first-letter
    8. ::first-line
    9. Experimental ::grammar-error
    10. ::marker
    11. ::part()
    12. ::placeholder
    13. ::selection
    14. ::slotted()
    15. Experimental ::spelling-error
    16. Experimental ::target-text
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @font-face
    6. @font-feature-values
    7. @font-palette-values
    8. @import
    9. @keyframes
    10. @layer
    11. @media
    12. @namespace
    13. @page
    14. Experimental @property
    15. @supports
  16. Functions
    1. Experimental abs()
    2. acos()
    3. asin()
    4. atan()
    5. atan2()
    6. attr()
    7. calc()
    8. clamp()
    9. cos()
    10. counter()
    11. counters()
    12. cross-fade()
    13. Experimental element()
    14. env()
    15. Experimental exp()
    16. fit-content()
    17. Experimental hypot()
    18. Experimental log()
    19. max()
    20. min()
    21. minmax()
    22. Experimental mod()
    23. path()
    24. Experimental pow()
    25. Experimental rem()
    26. repeat()
    27. Experimental round()
    28. Experimental sign()
    29. sin()
    30. Experimental sqrt()
    31. symbols()
    32. tan()
    33. url()
    34. var()
  17. Types
    1. <alpha-value>
    2. <angle>
    3. <angle-percentage>
    4. <basic-shape>
    5. <blend-mode>
    6. <calc-constant>
    7. <calc-sum>
    8. <color>
    9. <custom-ident>
    10. <dashed-ident>
    11. <dimension>
    12. <display-box>
    13. <display-inside>
    14. <display-internal>
    15. <display-legacy>
    16. <display-listitem>
    17. <display-outside>
    18. <easing-function>
    19. <filter-function>
    20. <flex>
    21. <frequency>
    22. <frequency-percentage>
    23. <gradient>
    24. <hex-color>
    25. <ident>
    26. <image>
    27. <integer>
    28. <length>
    29. <length-percentage>
    30. <named-color>
    31. <number>
    32. <percentage>
    33. <position>
    34. <ratio>
    35. <resolution>
    36. Deprecated <shape>
    37. <string>
    38. <system-color>
    39. <time>
    40. <time-percentage>
    41. <transform-function>
    42. <translation-value>
  18. Guides
  19. Animations
    1. Using CSS animations
  20. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
  21. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
  22. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
  23. Columns
    1. Basic concepts of Multicol
    2. Styling columns
    3. Spanning and balancing
    4. Handling overflow in Multicol
    5. Content breaks in Multicol
  24. Conditional rules
    1. Using feature queries
  25. CSSOM view
    1. Coordinate systems
  26. Flexbox
    1. Basic concepts of Flexbox
    2. Comparison with other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling flex item ratios
    6. Mastering wrapping of flex items
    7. Typical use cases of Flexbox
    8. Backwards compatibility of Flexbox
  27. Flow layout
    1. Block and Inline layout in normal flow
    2. In flow and Out of flow
    3. Formatting contexts explained
    4. Flow layout and writing modes
    5. Flow layout and overflow
  28. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
  29. Grid
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values and writing modes
    9. Grid layout and accessibility
    10. Grid Layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout
  30. Images
    1. Using CSS gradients
  31. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
  32. Logical properties
    1. Basic concepts
    2. Floating and positioning
    3. Margins, borders and padding
    4. Sizing
  33. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
  34. Positioning
    1. Understanding CSS z-index
  35. Scroll snap
    1. Basic concepts of scroll snap
    2. Browser compatibility and scroll snap
  36. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes
    4. Shapes from images
  37. Text
    1. Wrapping and breaking text
  38. Transforms
    1. Using transforms
  39. Transitions
    1. Using transitions
  40. Layout cookbook
    1. Media objects
    2. Columns
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
  42. Tools
    1. Color picker
    2. Box shadow generator
    3. Border image generator

Border-image generator

This tool can be used to generate CSS border-image values.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved? Learn how to contribute.

This page was last modified on Nov 3, 2022 by MDN contributors.

MDN logo

Your blueprint for a better internet.

  • MDN on Twitter
  • MDN on GitHub

MDN

  • About
  • Hacks Blog
  • Careers

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
Mozilla logo
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

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.