{"id":14093,"date":"2012-06-27T21:01:58","date_gmt":"2012-06-27T13:01:58","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14093"},"modified":"2025-04-04T01:09:55","modified_gmt":"2025-04-03T17:09:55","slug":"css3-border-image","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-border-image\/","title":{"rendered":"Elevate Your Photos with the CSS3 Border-Image Property"},"content":{"rendered":"

HTML<\/strong> and CSS<\/strong> have always allowed us to frame our content with borders, offering styles like solid, dotted, and dashed lines.<\/p>\n

However, the introduction of the CSS3 border-image property<\/a> has taken border design to a whole new level. This feature enables the use of images as borders, opening up possibilities for more visually appealing designs. Let\u2019s dive into how this property can be utilized to enhance your web elements.<\/p>\n

Syntax and Browser Compatibility<\/h2>\n

To define a border image in CSS3, use this shorthand syntax:<\/p>\n

\r\n border-image: [image source] [slice] [width] [outset] [repeat];\r\n<\/pre>\n
This syntax, as specified by the W3C, works in Chrome. Other browsers like Opera, Firefox, and Safari still need their respective prefixes (-o-<\/code>, -moz-<\/code>, -webkit-<\/code>). Internet Explorer, as expected, does not support this property.<\/p>\n
Moreover, the [width]<\/code> and [outset]<\/code> values in the border-image<\/code> property are not supported<\/a> by any browser yet, but you can use the border-width<\/code> property as a workaround for the width.<\/p>\n
In essence, currently, we\u2019re limited to using the [image source]<\/code>, [slice]<\/code>, and [repeat]<\/code> values.<\/p>\n
\r\nborder-image: [image source] [slice] [repeat];\r\n<\/pre>\n
Understanding Image Slicing<\/h2>\n
Before we dive into how to use this property, it\u2019s essential to grasp the concept of \u201cimage slice\u201d<\/strong>. Image slicing allows us to specify how an image is divided for border usage. It defines cuts from the top, right, bottom, and left edges of the image, effectively splitting the image into nine parts, as shown in the example below.<\/p>\n
\"Illustration<\/figure>\n
In the illustrated image, notice how sections 1<\/strong>, 3<\/strong>, 7<\/strong>, and 9<\/strong> form the corners of the border. Sections 2<\/strong>, 4<\/strong>, 6<\/strong>, and 8<\/strong> serve as the sides of the border. These sections are designed to be repeatable or stretchable, ensuring a seamless edge.<\/p>\n
Slice values can be set using either pixels or percentages, providing flexibility in measurement.<\/p>\n
More References:<\/h3>\n