| <!DOCTYPE HTML> |
| <head> |
| <style> |
| .box { |
| height: 100px; |
| width: 100px; |
| display: inline-block; |
| background-color: red; |
| } |
| .border-20 { |
| border: 20px solid; |
| } |
| .border-40 { |
| border: solid; |
| border-top: 0px; |
| border-right: 40px; |
| border-bottom: 40px; |
| border-left: 0px; |
| } |
| .no-border { |
| border: 0px none; |
| } |
| .border-image-100-intrinsic { |
| border-image: url('resources/svg-border-100x100-intrinsic.svg') 0 fill; |
| } |
| .border-image-100-intrinsic-slice { |
| border-image: url('resources/svg-border-100x100-intrinsic.svg') 20 fill; |
| } |
| .border-image-140-intrinsic { |
| border-image: url('resources/svg-border-140x140-intrinsic.svg') 0 fill; |
| } |
| .border-image-140-intrinsic-slice { |
| border-image: url('resources/svg-border-140x140-intrinsic.svg') 20 fill; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box no-border border-image-100-intrinsic"></div> |
| <div class="box border-20 border-image-100-intrinsic"></div> |
| <div class="box no-border border-image-100-intrinsic-slice"></div> |
| <div class="box border-20 border-image-100-intrinsic-slice"></div> |
| <br> |
| <div class="box no-border border-image-100-intrinsic"></div> |
| <div class="box border-20 border-image-100-intrinsic"></div> |
| <div class="box no-border border-image-100-intrinsic-slice"></div> |
| <div class="box border-20 border-image-140-intrinsic-slice"></div> |
| <br> |
| <div class="box no-border border-image-100-intrinsic"></div> |
| <div class="box border-20 border-image-100-intrinsic"></div> |
| <div class="box no-border border-image-100-intrinsic-slice"></div> |
| <div class="box border-20 border-image-140-intrinsic-slice"></div> |
| <br> |
| <div class="box no-border border-image-100-intrinsic"></div> |
| <div class="box border-20"></div> |
| <div class="box no-border border-image-100-intrinsic-slice"></div> |
| <div class="box border-40 border-image-100-intrinsic"></div> |
| </body> |
