Register / Log in
04
November

Simple Rounded Web Corners

Written by Dave Kennedy. View Comments Posted in: web development

Rounded corners on the web are all the rage these days. I recently updated my personal site to keep up with the times and look snazzy.

One of the features that I like about my site is that the header image is randomly 1 of about 70 photos. After I used some styling to get the menu and columns rounded, I thought that the header image, with it’s square corners, looked out of place. I really didn’t feel like firing up my image editor and editing all of those photos.

Rounded corners on the header image

Rounded corners on the header image

My solution was to tweak the existing code that displays a random image to instead set the background of a div to a random image. The contents of the div are always the same image – a png with 4 white corners and a transparent middle. This layering gives the appearance of all 70 of my images as having rounded corners.

Example rounded corners. Blue represents transparent space.

Example rounded corners. Blue represents transparent space.

Below are the HTML, JavaScript, and CSS code used to do this. (The CSS is actually all in-line produced by the JavaScript).

<!-- HTML -->

<script src="randomHeader.js" type="text/javascript">   </script>
// JavaScript
var imageList=new Array();
var titleList=new Array();

imageList[0]="./site_images/blueridge.jpg";
titleList[0]="Blue Ridge Mountains, Virginia"
// &gt;&gt; more images here &lt;&lt;
imageList[69]="./site_images/sun.jpg";
titleList[69]="Sunrise one morning in Roanoke, Virginia";

var randomImage = Math.floor(Math.random()*imageList.length);

document.write('
<div style="background-image: url('+imageList[randomImage]+');">');
document.write('<img title="' +  titleList[randomImage] +
'"src="./site_images/headercover.png" border="0" alt="" width="750" height="80" />');
document.write('</div>
');
View Comments

blog comments powered by Disqus
« »