Creating css border images

• 1.  First, open the border image you chose in your graphics editor. Just like other Retina images, you'll want the initial graphic to be 2x as large as it will be displayed on screen. Save this image as myBorder@2x.pnginto the /images/folder that is within the /retina/folder. Then resize the image to 50 percent and save it as myBorder.pnginto the same folder.
• 2.  Next save the photo you've selected into the /images/folder within the /retina/folder as
• myBorderPhoto.jpg. Now we've got all the images ready to start writing our CSS and HTML code.
• 3.  Create a new HTML document called borderTest.htmlinside of the /retina/folder. Add some CSS to create the border.

<style>
.imageBorder {
border-width: 10px; 
-webkit-border-image: url(images/myBorder.png) 10 repeat;
border-image: url(images/myBorder.png) 10 repeat;
}
.imageBorderRetina {
border-width: 10px; 
-webkit-border-image: url(images/myBorder@2x.png) 10 repeat;
border-image: url(images/myBorder@2x.png) 20 repeat;
}
</style>

• 4.  Then add your photo in HTML and apply the CSS styles to create both a Retina and non-Retina border image.

<img class="imageBorder" src="images/myBorderPhoto.jpg />
<img class="imageBorderRetina" src="images/myBorderPhoto.jpg />

• 5.  If you are working on a Retina device you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second border is much sharper than the first.

The first includes the –webkit vendor prefix, which allows the code to work in older versions of iOS.