Even More Image-Free CSS Styled Corners

Plain Rounded

No border, just simple cut corners. This one is useful with background-images if you can master using background-position on each of the sub-elements.

Anti-Aliased

Use the border to smooth the edges instead of rendering an actual border.

Anti-Aliased - colored header

This uses the exact same border code as the above anti-aliased example, but by isolating the colors of certain elements we can make the header a different color than the content text. This is a great example of why we are applying the colors as a separate class than the actual formatting. If you dig into the code you'll notice the only major difference is moving the H2 out of .content so that we can apply a different padding.

Plain

Rounded corners with border

3d Raised

Rounded corners with raised border

3d Inset

Rounded corners with inset border

3d Hover

Move mouse over this to see effect

Pillar

Outset rounded corners

Diagonal Cut

Simple corner cuts.

Rounded Cut

Take a bite out of your corners.

Rounded Flares

Standouts with rounded corners.

Square Cut

Simple corner cuts - technically only needs one div nested in .top and .bottom, but I left the two innermost in place to show that we're class compatable.

HTML

The following is the standard 'template' for each of the above styled borders.
<div class="corner_class color_class"> <b class="top"><b><b><b></b></b></b></b> <div class="content"> Your Content Here </div> <b class="bottom"><b><b><b></b></b></b></b> </div>

As mentioned on the Image-free Rounded CSS Corners page a good number of different corner styles can be applied without using images via CSS and just a little extra HTML. The net result loads faster than most image based solutions and is quite attractive - as the layout of these pages demonstrates.

To the right are examples of all the different styles that can be applied using the Common CSS Border Library I have created. Feel free to use these as you like, just be sure to toss in a comment saying where and who you got it from.

If you dig into the source, you'll find that each of the examples to the right use identical code, simply changing the outermost DIV's classes - the overall template for this page looking something like the code at the bottom of the right column, replacing the two classnames in italic with the desired styles. The following is a list of styles supported by the Common CSS Border Library and an example of how to make a color class.

CSS

.my_colors .top, .my_colors .top b, .my_colors .bottom, .my_colors .bottom b .my_colors .content { color:#FFF; background-color:#000; border-color:#888; }

On the color class you'll notice you don't actually define anything in the class itself - instead we use that wrapping class to nab all the appropriate 'children' elements in one declaration. One thing to keep in mind is that for .rounded_aa border-color actually defines the color of your anti-aliasing. If you want to see more complex color styles, take a look at the .mixed_color, .raised, .inset and .state classes in this page's screen_morestyles.css.

One of the big advantages to this approach is the reduction in the number of files involved - to do this page as graphics would take somewhere between 25 to 100 separate image files. With each 'handshake' to the server running anywhere from 40ms if you are right on top of the server with low-ping broadband, to upwards of 1 second for slow dialup with lots of routers between point A and point B using this method instead on simple styles can reduce download times greatly... and being pure CSS it renders FAST.

Again I would like to thank AyushJ on the Opera forums for linking me to Alessandro Fulciniti's page which inspiring my change from DIV to B tags, and "Digital Artist" on Digital Point for inspiring most of the styles presented on this page using his own approach to implementing this. Be sure to visit those links to see other ways of implementing this same concept. While the code for those is significantly heavier than this, it good to always explore all the different approaches - the more tools in the bag, the less likely you are to dive for hacks to fit that square peg into the round hole.

So Remember, if women don't find you handsome, they should at least find you handy.
-- Jason M. Knight (aka Deathshadow)

« Previous Page - Image-Free Rounded CSS Borders - Take 3