Skip to main content

Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

The basic idea

The border-image shorthand property has 3 parts:

border-image: url(border-image.png) 25% repeat;



Essentially, these allow you to specify:

1. An image to use as the border
2. Where to slice that image, dividing the image into 9 sections
3. How the browser should apply those sections to the edges of your element

The pertinent details

Let’s look at each part of the process in a little more detail. The first part is easy, and is familiar from the background-image property. For demonstration purposes I’ll use this image, which is 100px x 100px:



Slicing your image

The second part can have from one to four values, much like the border-width property, and they are specified in the same order: top, right, bottom, left. You can use percentages or pixels. Strangely, the percentages require the “%”, while pixels should be listed without the “px”:

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

In this case, since my image is 100px x 100px, the two rules above are equivalent – they slice the image in the same places. I’ve added some dimensions on my image to demonstrate:



Repeat, Round, Stretch

border-image will always place the corner sections of your image into the corresponding corners of your element box, but the third part of the shorthand rule tells the browser how to treat the middle sections of your image — the ones that will go along the edges of your element. Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory. Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image. Right now, Safari and Chrome interpret round as repeat. There can be up to two values: one for the top and bottom edges of the element, and one for the left and right. Here’s an example with the top/bottom value set to repeat, and the left/right value set to stretch:

#example-one {
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
border-image:url("border-image.png") 25 30 10 20 repeat stretch;
}



Border-width

border-image won’t do anything if you don’t specify a width for your border. For browsers that understand border-image, your image slices will be scaled to the specified width. If you use the border shorthand property, it provides a nice fallback for browsers that don’t:

#example-two {
border:50px double orange;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}



Or you can specify each width individually (in this example I’ve specified widths such that the image slices aren’t scaled at all):

#example-three {
border-color:orange;
border-style:double;
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}



Using a plain border at the same widths as your border-image won’t always be ideal, however, so you may want to use conditional stylesheets to give IE some different border styles altogether.

Source : http://css-tricks.com/understanding-border-image/#more-6883

Popular posts from this blog

Web Accessibility

  Web Accessibility: Making the Internet Inclusive for Everyone What Is Web Accessibility? Web accessibility means designing and developing websites so that people of all abilities and disabilities can use them effectively . An accessible website ensures that users with visual, auditory, motor, or cognitive impairments can perceive, understand, navigate, and interact with its content. Why Accessibility Matters Inclusive Experience: The web should be usable by everyone, regardless of physical or cognitive abilities. Legal Compliance: Many countries enforce accessibility laws (such as the ADA in the U.S. or the RPwD Act in India). Non-compliance can lead to legal action. Better User Experience: Accessible design benefits all users, including those on mobile devices, in noisy environments, or with slow internet connections. SEO Benefits: Search engines favor well-structured, semantic content, which overlaps with accessibility best practices. Core Principles ...
Read more

How CSS Sprites Work Under the Hood

When a browser loads a webpage, each image file triggers a separate HTTP request. If you have 20 icons, that’s 20 extra requests. A sprite consolidates all icons into one file , so the browser downloads just that single image once. Then, using background-position , you “shift” the visible window of that image to show the correct icon. Learn how to use CSS image sprites to enhance your website's performance Workflow in Detail Collect Icons Gather all icons you use repeatedly (social media, buttons, UI elements). Create a Sprite Sheet Use a tool like: Figma or Photoshop for manual placement. SpritePad or Glue (command line) to automate sprite sheet generation and output CSS coordinates. Calculate Positions Each icon’s top-left coordinates inside the sprite image determine its background-position . Example: if an icon starts 96 px from the left and 64 px from the top, use: .icon-example { background-position : - 96px - 64px ; } Serve Optimally Save t...
Read more

Mobile Web Design: Tips and Best Practices

Mobile Web Design Trends For 2009 Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience. Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips. 1....
Read more