Nine-Slice Border-Image Tester

How Nine-Slice Scaling Works

Nine-slice scaling divides an image into 9 sections using slice values from each edge. This allows the image to scale to any size while preserving corner details and preventing distortion.

Corner
(Fixed)
Top Edge
(Scale H)
Corner
(Fixed)
Left Edge
(Scale V)
Center
(Scale Both)
Right Edge
(Scale V)
Corner
(Fixed)
Bottom Edge
(Scale H)
Corner
(Fixed)

Corners stay at their original size • Edges stretch in one direction • Center stretches in both directions

Slice Value: Where to cut the image into 9 sections (in pixels from edges)
Slice Top 7
Slice Right 7
Slice Bottom 7
Slice Left 7
Border Width: Visual thickness of the rendered border
Border Width 5px
Container Size: Dimensions of the preview box
Width 300px
Height 200px
Upload an image to begin

Generated CSS


          


          

            

              
NineSliceFrame Component Props