CSS Border Image Generator

Keep a normal border style as a fallback and remember that the border shorthand can reset border-image longhands.

Start color

End color

Angle

Repeat

Slice

Border width (px)

Outset (px)

Border-image preview

Generated CSS—

Keep a fallback border

border-image replaces the painted border image, but a separate border style/width is still a useful fallback and avoids browser edge cases.

Applying the normal border shorthand later can reset border-image longhands. Keep declaration order intentional.