CSS: Rounded Corners and Shadow
Introduction
Author: Martin WarningYear: 2008
License: Free
This code combines XHTML <div>, CSS code and images to create a rounded box around any content on your page. This code supports a flexible width although a minimum width and height is required for it to display correctly. Most designers use fixed width and or height to create this type of design which is a lot easier to implement, but in case your content can be of varying size or you have a flexible page design that adjusts to the browser windows size this might not work for you. That's where this example provides a solution.
Code
Languages:- CSS
- XHTML
<style type="text/css">
.lefttop{background-image:url(left_top.gif);background-repeat:no-repeat;background-position:top left;}
.righttop{background-image:url(right_top.gif);background-repeat:no-repeat;background-position:top right;}
.leftbottom{background-image:url(left_bottom.gif);background-repeat:no-repeat;background-position:bottom left;}
.rightbottom{padding:0 35px 0 25px;background-image:url(right_bottom.gif);background-repeat:no-repeat;background-position:bottom right;}
.centertop{background-image:url(center_top.gif);background-repeat:repeat-x;background-position:top left;}
.centerbottom{padding:25px 0 35px 0;background-image:url(center_bottom.gif);background-repeat:repeat-x;background-position:bottom right;}
.leftmiddle{margin:0 -35px 0 -25px;background-image:url(left_middle.gif);background-repeat:repeat-y;background-position:top left;}
.rightmiddle{background-image:url(right_middle.gif);background-repeat:repeat-y;background-position:top right;}
.content{min-height:60px;min-width:60px;margin-right:10px;padding:2px 13px;background-color:#fafafa;}
</style>
The XHTML part:
<div class="lefttop"><div class="righttop"><div class="leftbottom"><div class="rightbottom"><div class="centertop"><div class="centerbottom"><div class="leftmiddle"><div class="rightmiddle"><div class="content"> Your content here </div></div></div></div></div></div></div></div></div>
The box can be implemented more than one time on a page by just using the XHTML part twice. The example can be downloaded and includes the images. Your free to use and modify the supplied images.
Example: See it in action
This example doesn't display correctly in Internet Explorer 6 and older.
example1.zip
