Article | Date posted : 7 June, 2013 | Updated on : 7 June, 2013

Panerabread CSS Border With Images

Sponsored Links

At Panerabread I have discovered a very nice border styling that they use on there div’s, so ill explain how they have done it by using background images.

First you need to split up your images into sections. You will have your 4 cornes, a horizontal and vertical section.

Background Image Graph

Background Image Graph

For creating this border box we only need to create 4 images. As we will reproduce the other sections by rotating the styling.

So now we know we need 4 different images we will start by creating them. For the corner images we will create L shaped corners and for this exercise I will give them vivid colours so we know what is happening to each section. When creating the L shaped corners we need to make an overlap section. By fading out each corner. As we want to fade in the corners towards the horizontal and vertical sections. This will help when using resizeable divs, as we don’t want to limit ourselves to one fixed size.

Below i have created 2 corner images







And now a vertical and horizontal image

horizontal vertical









We start by building the side borders which will also be the container div.

The styling for the first side will be the left hand side. We give it a width and height, position it relative so that the div will be positioned to it’s current position within the element you have placed the div in.

Set overflow to hidden to hide any images going outside of the div.

Now the fun part, showing the side by using the background property.

background: url(http://yoururltoimage.jpg) position repeat

We will position the image left and have the repeat set to Y, by repeating Y it will mean that your image will repeat itself all the way to the edge of the border verticality.

Now we will use a css pseudo to rotate this for the right hand side using the following styling.

We simply set the position to absolute and rotate it 180 degrees

The next step is creating the top section. We will add an inner div named ws-panera-box-top

We will now add the styling for ws-panera-box-top

Position the div absolute with z-index set to the next layer 2, width and height set to 100%

And creating the background images, as you can see we are using 3 url’s in one given background. We separate the images by simply inserting a comma.

The first one will be set to the left top corner, with repeat set to no-repeat

The second one top right and repeat set to no-repeat

The centre image border will be set to top with repeat set to x

We add the final div which is the bottom part.

The styling for the 3rd div will be the same as the top one only we will add a class to rotate this 180 degrees.

And this is how they have created borders on divs at Panera.

Here is an updated method by reducing the div’s to only 2 a little more css coding but less clutter down the line.

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me