YouTip

## CSS3 border-image-width Property The `border-image-width` CSS property specifies the width of an element's border image. It defines the inward offsets that divide the border image area into nine regions (four corners, four edges, and a middle). --- ## Quick Example The following CSS rule defines a border image and sets its width: ```css div { border-image-source: url(border.png); border-image-width: 30px 30px; } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports this property. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **border-image-width** | 15.0 | 11.0 | 13.0 | 6.0 | 15.0 | --- ## Property Definition and Usage The `border-image-width` property determines the drawing area of the border image. If this property is larger than the element's actual `border-width`, the border image will extend beyond the border padding (and potentially content) edge. | Feature | Description | | :--- | :--- | | **Default Value:** | `1` | | **Inherited:** | No | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.borderImageWidth = "30px 30px"` | --- ## Syntax ```css border-image-width: [ | | auto ]{1,4}; ``` ### Value Multipliers and Shorthand Rules You can specify one, two, three, or four values: * **1 value:** Applies to all four sides (top, right, bottom, left). * **2 values:** The first value applies to the **top and bottom**, the second to the **left and right**. * **3 values:** The first value applies to the **top**, the second to the **left and right**, the third to the **bottom**. * **4 values:** Apply to the **top, right, bottom, and left** respectively (clockwise order). *Note: Negative values are not allowed.* ### Property Values | Value | Description | | :--- | :--- | | *number* | Represents a multiple of the corresponding `border-width`. For example, a value of `2` means the border image width will be twice the size of the element's `border-width`. | | *%* | Represents percentages relative to the size of the border image area (the width of the area for horizontal offsets, and the height of the area for vertical offsets). | | *length* | A standard CSS length measurement (e.g., `px`, `em`, `rem`). | | `auto` | If specified, the width is set to the intrinsic width or height of the corresponding image slice (from `border-image-slice`). If the image does not have an intrinsic size, the corresponding `border-width` is used instead. | --- ## Detailed Examples ### Example 1: Using Numbers (Multipliers) Using a unitless number scales the border image relative to the element's defined `border-width`. ```css div { border: 10px solid transparent; border-image-source: url(border-frame.png); border-image-slice: 30; /* The border image width will be 20px (2 * 10px border-width) */ border-image-width: 2; } ``` ### Example 2: Using Explicit Lengths (Pixels) You can set explicit pixel values to control the exact size of the border image, regardless of the `border-width`. ```css div { border: 5px solid transparent; border-image-source: url(border-frame.png); border-image-slice: 30; /* Top/Bottom: 20px, Left/Right: 15px */ border-image-width: 20px 15px; } ``` ### Example 3: Using Percentages Percentages are calculated relative to the dimensions of the element's border box. ```css div { border: 10px solid transparent; border-image-source: url(border-frame.png); border-image-slice: 10%; /* Border image width is 5% of the element's total width/height */ border-image-width: 5%; } ```