webkitboxsizing

WebKitBoxSizing, commonly seen as the CSS property -webkit-box-sizing, is the vendor-prefixed version of the standard CSS box-sizing property used in WebKit-derived browsers such as Safari and older versions of Chrome. It controls how an element’s width and height are calculated by determining whether padding and borders are included within the defined size.

Historically, -webkit-box-sizing appeared before the box-sizing property was standardized and widely implemented without a prefix. As browsers adopted the unprefixed box-sizing, the need for the WebKit-prefixed form diminished. Today, -webkit-box-sizing is largely obsolete for modern websites, but some legacy pages may still rely on it for compatibility with older WebKit-based software.

The box-sizing property has two main values: content-box and border-box. content-box uses the standard CSS box model, where width and height apply to the element’s content only, excluding padding and borders. border-box includes padding and borders within the specified width and height, often simplifying layout management. In CSS, you can specify both forms, with the prefixed version used only for backward compatibility: -webkit-box-sizing: border-box; or -webkit-box-sizing: content-box, followed by the standard box-sizing: border-box; or box-sizing: border-box for modern browsers.

In JavaScript, the prefixed property is accessed via the camelCase form WebkitBoxSizing on an element’s style object, e.g., element.style.WebkitBoxSizing = "border-box".

See also box-sizing, the CSS box model, and vendor-prefixed CSS properties.