jQuery borderStyle is a compact jQuery plugin for reading and writing border widths, styles, colors, and corner radii through one chainable borderStyle() method. It was written in 2010, when rounded corners still required separate CSS3, WebKit, and Gecko property names, and emits all three variants for compatibility with browsers from that period.
The repository contains the original version 1.0 source as a single file and has no packaged releases. Load jQuery first, then include jquery.borderstyle.js directly:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="jquery.borderstyle.js"></script> Setting Borders
A number applies the same radius to all four corners. The method returns the original jQuery collection, so calls may be chained with other jQuery operations.
$('#box').borderStyle(50); An object provides individual corner radii and ordinary border properties. Missing corners fall back to normalRadius, or to zero when no common radius is supplied.
$('.notice').borderStyle({
normalRadius: 10,
topLeftRadius: 24,
bottomRightRadius: 24,
width: 2,
style: 'dashed',
color: '#176b87',
unit: 'px'
}); The same options may be passed as an unquoted declaration string. Whitespace is removed, while commas and semicolons both separate key-value pairs:
$('#label').borderStyle("topLeftRadius:33; bottomRightRadius:50, normalRadius:10; style:dashed; color:red"); Options
| Property | Meaning |
|---|---|
| normalRadius | Fallback radius for every corner without an explicit value. |
| topLeftRadius | Radius of the upper-left corner. |
| topRightRadius | Radius of the upper-right corner. |
| bottomLeftRadius | Radius of the lower-left corner. |
| bottomRightRadius | Radius of the lower-right corner. |
| width | Border width combined with the selected unit. |
| style | CSS border style such as solid or dashed. |
| color | Any color string understood by the target browser. |
| unit | Unit used for widths and radii; defaults to px. |
Reading the Generated Style
Calling the plugin without arguments returns a CSS declaration string rather than the jQuery collection. When at least two corners share one radius, the serializer emits a common radius declaration and writes only the remaining corner overrides. It also includes the first selected element's inline border shorthand when present.
var css = $('a').first().borderStyle();
console.log(css); This getter reflects the plugin's most recently assigned radius state, not computed styles independently read from every matched element. It should therefore be treated as a serializer for a preceding plugin call rather than as a general replacement for jQuery's .css() getter.
Compatibility and Maintenance
The unprefixed radius properties are sufficient in current browsers, so the WebKit and Gecko aliases are useful only for historical compatibility. The plugin is best suited to maintenance of historical jQuery applications; new code can usually express the same work directly through CSS classes, custom properties, or jQuery's .css() method.
Two implementation details deserve attention before adopting version 1.0 unchanged. It adds excludeLargestAmmount() to Object.prototype, which can leak into unrelated object iteration. Keep that helper local when maintaining a fork. The border-width assignment also uses param.style where param.width is intended; replace the original line with the corrected assignment below:
styles.borderWidth = param.width + unit; The parser accepts only simple, unquoted values and does not implement the full CSS declaration grammar. Prefer the object form whenever values may contain punctuation or when input comes from outside the application.