Books By People I Know - the blog

April 2, 2006

Rounded Corners with a Bullet.

Okay, I know there are a lot of different approaches to this, but I wanted to try one of my own. This version uses CSS and a bullet text character, •, written "•" in html. There are no images or javascript used in this example.

Here is some example text in a fixed size box

[More examples here]

Here is the HTML for a single box:

<div class="bigbox">
     <div class="circle_corner upper_left"><div class="circle_ul">&bull;</div></div>
     <div class="circle_corner upper_right"><div class="circle_ur">&bull;</div></div>
     <div class="circle_corner lower_left"><div class="circle_ll">&bull;</div></div>
     <div class="circle_corner lower_right"><div class="circle_lr">&bull;</div></div>
     <p>Here is some example text in a fixed size box</p>
</div>

note that some of the <div>s have two classes associated with them.

Here is the CSS:

This just describes the basic box. Works with position:relative or position:absolute, also variable width and height boxes although full width breaks in IE.

.bigbox{
     background-color: #FF0000;
     display: block;
     margin: 10px;
     padding: 17px;
     height: 200px;
     width: 300px;
     position:relative;
}

The following classes position in each corner of the box the .circle_corner container which holds the rounding effects.

.upper_left {
     position:absolute;
     left:0px;
     top:0px;
}

.upper_right {
     position:absolute;
     right:0px;
     top:0px;
}

.lower_left {
     position:absolute;
     left:0px;
     bottom:0px;
}

.lower_right {
     position:absolute;
     right:0px;
     bottom:0px;
}

This class creates a small container .circle_corner used to hold the bullet character. It is intentionally smaller than the bullet to hide unneeded parts of the bullet. It is therefore necessary to declare overflow:hidden. I use Verdana as the font since it seems to hold up well across platforms.

.circle_corner{
     font-family:Verdana;
     font-size: 90px;
     color: #FF0000;
     background-color: #ffffff;
     height: 17px;
     width: 17px;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     line-height:60px;
     letter-spacing:normal;
}

These four classes position the bullet character within the .circle_corner containers, one for each corner. By positioning the circular bullet character in the square container the necessary clipping occurs to create the rounding without excess whitespace.

.circle_ul{
     margin: 0px;
     padding: 0px;
     position:absolute;
     top:-21px;
     left:-8px;
}

.circle_ur{
     margin: 0px;
     padding: 0px;
     position:absolute;
     top:-21px;
     left:-24px;
}

.circle_ll{
     margin: 0px;
     padding: 0px;
     position:absolute;
     top:-37px;
     left:-8px;
}

.circle_lr{
     margin: 0px;
     padding: 0px;
     position:absolute;
     top:-37px;
     left:-24px;
}

That's it.
I've tested it in a Windows environment on IE, Netscape, and Opera and it seems to work fine with the exception of the IE problem noted above. I've looked once from Safari in an Apple store and it looked right. I believe that the technique is easy to work with, but it obviously won't look right with borders on the boxes. I think the technique could also be used with a single circular image instead of the bullet character. The clipping would work the same, or you could actually use the clip css tag.

[More examples here]

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Logged in as info. Logout »

Powered by WordPress