Beveled corners using jQuery Corner Plug-in

Part of an exploration of bevel techniques, this uses the jQuery Corner plug-in.

by spdawson

HTML

<h2>Four Corner Bevel</h2>

<div class="bevel all">
    <p>Content<br />Goes<br />Here</p>
</div>

<h2>Diagonal Bevel 1</h2>

<div class="bevel tr bl">
    <p>Top right, bottom left</p>
</div>

<h2>Diagonal Bevel 2</h2>

<div class="bevel tl br">
    <p>Top left, bottom right</p>
</div>

<h2>One Only</h2>

<div class="bevel tr">
    <p>One corner, see bottom bevel for spacing ...</p>
</div>

CSS

.bevel{
    background: #efefef url("http://placehold.it/2000x200/666");
    padding: 15px;
    margin-bottom: 15px;
    color: white;
}
body {
    background-color: black;
    margin: 20px;
}
h2 {
    margin-bottom: 10px; 
    color: white;        
}

JavaScript

$(document).ready(function () {
     $('.bevel.all').corner("bevel cc:#000");
     $('.bevel.tr').corner("bevel tr cc:#000");
     $('.bevel.tl').corner("bevel tl cc:#000");
     $('.bevel.br').corner("bevel br cc:#000");
     $('.bevel.bl').corner("bevel bl cc:#000");
});

/*!
 * jQuery corner plugin: simple corner rounding
 * Examples and documentation at: http://jquery.malsup.com/corner/
 * version 2.12 (23-MAY-2011)
 * Requires jQuery v1.3.2 or later
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Authors: Dave Methvin and Mike Alsup
 */

/**
 *  corner() takes a single string argument:  $('#myDiv').corner("effect corners width")
 *
 *  effect:  name of the effect to apply, such as round, bevel, notch, bite, etc (default is round). 
 *  corners: one or more of: top, bottom, tr, tl, br, or bl.  (default is all corners)
 *  width:   width of the effect; in the case of rounded corners this is the radius. 
 *           specify this value using the px suffix such as 10px (yes, it must be pixels).
 */
;(function($) { 

var style = document.createElement('div').style,
    moz = style['MozBorderRadius'] !== undefined,
    webkit = style['WebkitBorderRadius'] !== undefined,
    radius = style['borderRadius'] !== undefined || style['BorderRadius'] !== undefined,
    mode = document.documentMode || 0,
    noBottomFold = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8),

    expr = $.browser.msie && (function() {
        var div = document.createElement('div');
        try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }
        catch(e) { return false; }
        return true;
    })();

$.support = $.support || {};
$.support.borderRadius = moz || webkit || radius; // so you can do:  if (!$.support.borderRadius) $('#myDiv').corner();

function sz(el, p) { 
    return parseInt($.css(el,p))||0; 
};
function hex2(s) {
    s =...