jQuery .outerWidth() Method

What Is .outerWidth()?

.outerWidth() gets or sets the width of matched elements including padding and border (getter since 1.2.6; setter since 1.8). Pass true to include margin. The getter returns a unitless pixel Number.

$("div").outerWidth()           // content + padding + border
$("div").outerWidth(true)       // also include margin
$("div").outerWidth(100)        // set outer width (1.8+)
$("div").outerWidth(100, true)  // set accounting for margin

.width()         → content only
.innerWidth()    → content + padding
.outerWidth()    → content + padding + border
.outerWidth(true)→ + margin

How to Use .outerWidth()

Measure or set the border box — never on window or document.

1. Select a DOM element (not window or document).
2. Call .outerWidth() to read content + padding + border.
3. Pass true when horizontal margin must count too.
4. Pass a Number/string (or callback) to set outer width since jQuery 1.8.

Pseudocode

function outerWidth(selection, valueOrMargin, includeMargin):
    if selection is empty:
        return undefined

    if valueOrMargin is missing or is a Boolean:
        el = first matched element
        w = contentWidth + padding + border
        if valueOrMargin === true: w += margin
        return w

    for each el in selection:
        newW = valueOrMargin is function
            ? valueOrMargin(index, currentOuterWidth)
            : valueOrMargin
        set CSS width so outer box = newW
    return selection

Cheat Sheet

Keep these facts handy while measuring the border box.

Live Preview

Pick an action against the sample box and see what .outerWidth() returns or sets.

$("#box").outerWidth()
→ 140

/* content + padding + border */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").first();

console.log("outerWidth: " + p.outerWidth() + "px");

outerWidth: 314px

(Exact number depends on layout, padding, and border.)

var p = $("p").first();

console.log("outerWidth:       " + p.outerWidth());
console.log("outerWidth(true): " + p.outerWidth(true));

outerWidth:       140
outerWidth(true): 160

(When horizontal margin totals 20px.)

var $box = $("#box");

console.log("width:      " + $box.width());
console.log("innerWidth: " + $box.innerWidth());
console.log("outerWidth: " + $box.outerWidth());

width:      120
innerWidth: 136
outerWidth: 140

$("#box").outerWidth(120);

console.log($("#box").outerWidth());  // 120

120

Performance Notes

Dimension getters force layout. Read once, reuse the Number, and avoid calling .outerWidth() inside tight loops unless needed.

Key Takeaways