Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .border1 { border: 10px solid transparent; padding: 20px; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 20px; } .border2 { border: 10px solid transparent; padding: 20px; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 20px 10px; } .border3 { border: 10px solid transparent; padding: 40px; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 20px 10px 40px; } .border4 { border: 10px solid transparent; padding: 55px; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 20px 10px 40px 55px; } </style> </head> <body> <h1>The border-image-width Example</h1> <p class="border1">Here the border-image-width is set to 20px.</p> <p class="border2">Here the border-image-width is set to 20px and 10px.</p> <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p> <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p> </body> </html>