To add rounded corners without borders to your profile is very easy. The profiles have been set up with some extra divs specifically for this purpose.
The extra divs are called .onionskin1, .onionskin2, .onionskin3
What you need to do for rounded corners working with 6 elements - the background colour of the page, the background colour for each box, and of course the 4 corners.
Fire up photoshop or paint shop pro - or whatever your image editing program of choice is, and create a box with rounded corners. Or in fact, any style of corners you like. For this method you need to make a plain box, we are not dealing with a border colour at all, so a clean sharp edge is essential.
Slice your box corners, and give the slices names - you can use what you like, I tend to call them tl.gif bl.gif tr.gif and br.gif. When you save the slices, make the inner part of them transparent, but the outer part retains the page background colour.
Upload them ready for action.
Now you need to use this css:
body { background: #000; }
.box { background: #fff url(tl.gif) no-repeat top left; }
.onionskin1 { background: url(tr.gif) no-repeat top right; }
.onionskin2 { background: url(bl.gif) no-repeat bottom left; }
.onionskin3 { background: url(br.gif) no-repeat bottom right; }
So body is the page background colour, .box is the box background colour and first corner, then the onionskins are the remain three corners.
Make sure you replace the filenames with the complete urls, and there you have it.
The extra divs are called .onionskin1, .onionskin2, .onionskin3
What you need to do for rounded corners working with 6 elements - the background colour of the page, the background colour for each box, and of course the 4 corners.
Fire up photoshop or paint shop pro - or whatever your image editing program of choice is, and create a box with rounded corners. Or in fact, any style of corners you like. For this method you need to make a plain box, we are not dealing with a border colour at all, so a clean sharp edge is essential.
Slice your box corners, and give the slices names - you can use what you like, I tend to call them tl.gif bl.gif tr.gif and br.gif. When you save the slices, make the inner part of them transparent, but the outer part retains the page background colour.
Upload them ready for action.
Now you need to use this css:
body { background: #000; }
.box { background: #fff url(tl.gif) no-repeat top left; }
.onionskin1 { background: url(tr.gif) no-repeat top right; }
.onionskin2 { background: url(bl.gif) no-repeat bottom left; }
.onionskin3 { background: url(br.gif) no-repeat bottom right; }
So body is the page background colour, .box is the box background colour and first corner, then the onionskins are the remain three corners.
Make sure you replace the filenames with the complete urls, and there you have it.
