JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<!-- Webkit CSS3 border-image with sprites -->
<div class="alert-button">A Button with Border-image</div>

CSS

.alert-button {
    /* notice the fat border-bottom */
    -webkit-border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 repeat repeat;
    
    /* notice that border-top and bottom are set zero */
    border-width: 0 14px;
    
    /* some visual styling here */
    -webkit-box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    min-width: 120px;
}

.alert-button:active {
    /* the fat border-top and bottom adjusted */
    -webkit-border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 37 14 74 14 repeat repeat;
    color: #fff;
}

JavaScript

/*
take a look at the image source: 
http://girliemac.com/sandbox/images/alert-button.png 
to see the sprites!
*/