| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| td { |
| padding: 10px; |
| } |
| span { |
| padding: 5px 14px; |
| } |
| .font-size-200 { |
| font-size: 200%; |
| } |
| .font-size-400 { |
| font-size: 400%; |
| } |
| .border-slices { |
| border: 20px solid transparent; |
| border-image: url("resources/button-border.svg") 0 14 0 14 fill; |
| } |
| .no-border-image-cropped { |
| border: 0px none; |
| background-image: url("resources/button-border-cropped.svg"); |
| background-size: 100% 100%; |
| } |
| .no-border-image { |
| border: 0px none; |
| background-image: url("resources/button-border.svg"); |
| background-size: 100% 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <table> |
| <tr> |
| <td><span class="font-size-200 border-slices">Search</span></td> |
| <td><span class="font-size-200 no-border-image-cropped">Search</span></td> |
| <td><span class="font-size-200 no-border-image">Search</span></td> |
| </tr> |
| <tr> |
| <td><span class="font-size-400 border-slices">Search</span></td> |
| <td><span class="font-size-400 no-border-image-cropped">Search</span></td> |
| <td><span class="font-size-400 no-border-image">Search</span></td> |
| </tr> |
| </table> |
| </body> |
| </html> |
