One Corner Image

Every box on this page uses a single shared image for all rounded corners. Because we are using a "reverse-transparent" PNG corner image, the background color and style for your boxes can change at any time.

Scalability

Resize your browser window to see the scalability of Karate Corners in action! Stop worrying about the width of your content; dynamic width designs are much more accessible and can be easily displayed on a variety of mobile devices.

Markup

Karate Corners use a minimal amount of HTML and CSS. The code is both simplified as well as logical in it's hierarchy, so you'll easily be able to customize the code in order to fit your partiuclar design.

Omit Corners

Artistic appeal is at your fingertips. Notice how this box is missing a bottom-left-hand and top-right-hand rounded corner. Simply omit the DIV tag for a particular corner to achieve this artistic design.

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.