RootsWeb is funded and supported by
Ancestry.com and our loyal RootsWeb community.
Learn more.
About Us | Contact Us | Copyright | Report Inappropriate Material
Corporate Information | Privacy | Terms and Conditions | CCPA Notice at Collection
This is an example of how CSS can be used instead of graphics to create cute rounded corners on your website. I have found similar references to creating these graphic-less corners elsewhere on the web, but all have required the background color of the outer edge of the corners to match that of the page over which they are placed. This limits their positioning and they couldn't be used over a photograph for instance.
Well, after some experimentation I have overcome the problem, and the result is as you see below and to the right. For a fuller explanation please go to the next page.
This cute little box with its rounded corners is a major modification of a project by Stu Nicholls. It uses, instead of graphics, four absolutely positioned quadrants of an Arial bullet point in a div with a transparent background. The outer corners of each ¼ bullet are also transparent. Separate vertical and horizontal divs within the sides of the bullet quadrants are given the same color as the bullets. Check out the CSS!