| <html> |
| <head> |
| <style> |
| div { |
| width: 83px; |
| height: 60px; |
| margin: 10px; |
| display: inline-block; |
| border-style: solid; |
| } |
| |
| .text-image { |
| border-width: 21px 30px 30px 21px; |
| -webkit-border-image: url("resources/border-image.png") 21 30 30 21; |
| } |
| |
| .diamond-image { |
| border: 15px solid transparent; |
| border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADsklEQVR4Xu3cSXbbMAwAUOpk7SnSZdOTNd3mkq5ki7YlTgCIgXqEt7GE4AePIiGGS/gOt2Dx+QgLJeztO3yu1/1YPsIfyvVW+S5WgQMBekf+uwN/kbCNCusy0CfkWMx4bIcuDwQFZBq2Q+ehG8h4bIdOoYHIOGyHPkIjkeHYDv2CJiLDsB364dSJ3MZ2aDbkOvbs0EyVfH6ipvPsmaGFkPOVPSu0MHKKPSO0EvIRezbotWW4dd9ig4jUiCNc9LW2DLfun/rHrKlkAn0L/5Yl/FZXXgOaQW9tUtWhY0P+tVbzbENH7EerYEfkrZRnhWZcDRbaf3slx5/ODC2G/V7JDs3WTDq1/06V7NAnn8fL175pX66SHTodWrsekDXk2R+GuacYCbuF7NCFCQNmGIEgO3R5rQaqbCiyQ9cXxVVsDLJDt7sPWWwsskO3oZNFDQXZoWHQT+xb+HlvEFE+Zktwyi+7XtO9q5MY1+qy3nx7ts727eq0EiPE5djFioZm29VJSNjiEq58UdCsuzot1JAxOfMFQ4MWDiHg9ysjk9f6One+IGhg0GhweWyJfJvQyKCXx5bKtwpNDHpZbMl8i9CdQS+HLZ1vFpop6GWwNfJNoJmDDo+tle8BWijosNia+T6hhYMOh62d7x1aKegw2Bb56u5/ey3rzBY1ysiv4jIJTG3aM6y/zfJVHzoMkePfSRV7z1f3YTgAsir2W75607uBkFWwT/nqLFgGRBbFzuQrvwQfGFkEu5CvbFPpAsis2JV85dqkF0JmwW7kK9P4vyByFzYg3yY0ep4NCMqw7hC9BWqeDcwXBA3GBgYVVWK6OQgbkS8YuomNCMpkIX6bKjYyXxR0ERsZVFyIMUAWm5AvGjrBJgRldFC51QGbmC8J+onds6tThYgvyB27I1/T/wWnMOzV5WeTgvH8bFIwVd8XkdCFGQD+TY3ZRnSjwJjTdhtzWhy2Ub7Dj9GghQNmF6tDpyMREDleCKtshz5CI5Hh2A79giYiw7Ad+uHUidzGdmg25Dr27NBMlXx+ovrZpO/zaCHkfGXPWtHCyCn2jNBKyEfs2aBNjszcVpB+Nmlfjwp09da097NJQVT0L8U3I7MNHX42Kb1mcFe+9aNFH4rnd3yzVnT864hg516kzg7N2OfYmyZ+NukDovAqi6Wya1sCvKKZ2qStfRcOzdD4byFvIRw6nbSghhEIskOXZ4YgbCiyQ9en4Jy7On3oaCx3uHZ1OjRgXcmxq9OhAdDPRU3Hrk4r6P9CduKlL0jWvgAAAABJRU5ErkJggg==) 30 30; |
| } |
| |
| div.round-round { |
| border-image-repeat: round round; |
| } |
| |
| div.round-stretch { |
| border-image-repeat: round stretch; |
| } |
| |
| div.repeat-round { |
| border-image-repeat: repeat round; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="text-image round-round"></div> |
| <div class="text-image round-stretch"></div> |
| <div class="text-image repeat-round"></div> |
| <br> |
| <div class="diamond-image round-round"></div> |
| <div class="diamond-image round-stretch"></div> |
| <div class="diamond-image repeat-round"></div> |
| </body> |
| </html> |
