Last year I came across a superb method of creating rounded corners that I want to share with you. I cannot take credit for it but you can thank Dave Woods for a well thought out approach.
The beauty behind Dave's solution is that it relies upon one circular image. This circle is used as the rounded edge and spliced via CSS positioning in four quadrants. The background of the image should be the same color as the background to bleed in with. The circle color should be the same color as the background of your blocks (usually white).
Each block that you want rounded corners with, gets two sets of span tags marking the tops and bottoms.
Now why is this a superior method? Imagine having template pages with each page using a different rounded corner color and/or radius. Instead of creating the images and hand slicing, you can just fire up your image editor and create a transparent gif with a circle in it.
Check out Dave's solution and I think you will agree that its a very flexible and easily maintainable approach.
Rounded Corners In CSS With Meyer Reset
The following is XHTML strict markup using Eric Meyer's global reset along with Dave Wood's CSS rounded corner code.
The image:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>Rounded Corners In CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* Eric Meyer Global Reset */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Our CSS */
body {
background-color: #666; /* outside of circle needs to be this color in the image */
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: 400;
color: black;
line-height: 1.3em;
}
#container {
background-color: white; /* color of circle image */
overflow: hidden; /* very important or you will see a things shift down */
font-size: 1em;
}
h1 {
font-size: 1.4em;
padding: 1em 0 1em 20px;
}
p {
padding: 0 20px 1em 20px;
}
/* The Rounded Circle CSS */
.tl {
background-image: url(page-corners.gif);
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.tr {
background-image: url(page-corners.gif);
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
.bl {
background-image: url(page-corners.gif);
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.br {
background-image: url(page-corners.gif);
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
</style>
</head>
<body>
<div id="container">
<span class="tl"></span><span class="tr"></span>
<h1>This is a rounded corner test</h1>
<p>
Vivamus elit. Mauris odio felis, bibendum eu, eleifend non, rutrum in, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada sapien sit amet risus fringilla nonummy. Praesent laoreet tristique sem. Vestibulum venenatis congue lacus. Etiam volutpat, lacus sit amet eleifend posuere, purus leo bibendum nulla, sit </p>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>- SiteAdmin's blog
- Login or register to post comments
Del.icio.us
Digg
Technorati