| <html> | |
| <head> | |
| <style> | |
| div { | |
| border-width: 21px 30px 30px 21px; | |
| width: 120px; | |
| height: 120px; | |
| margin: 10px; | |
| border-image-source: url("resources/border-image.png"); | |
| border-image-repeat: repeat; | |
| display: inline-block; | |
| } | |
| div.tl { | |
| /* Normal case */ | |
| border-image-slice: 21 30 30 21 fill; | |
| } | |
| div.tr { | |
| /* Slice total larger than image size */ | |
| border-image-slice: 42 60 60 42 fill; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="tl"></div> | |
| <div class="tr"></div> | |
| </body> | |
| </html> |