Performance
Everything used in this demo (code and images) adds up to less than 6 KB of data. Without the optional background gradient images, you are looking at less than 2 KB of data.
Get the Code
What are you waiting for? You can right-click anywhere on this page and select "View Source" to see the code. Also, check out this blog post for a more in-depth look at Karate Corners.
.cornerBox { position: relative; background: #cfcfcf; width: 100%; }
.corner { position: absolute; width: 10px; height: 10px; background: url('corners.gif') no-repeat; font-size: 0%; }
.cornerBoxInner { padding: 10px; }
.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }
