Creating corners in CSS the easy way, with Spiffy Box

Filed under: Design, Developer, Internet, Web services

Creating corners in CSS the easy way, with Spiffy Box

by Chris Gilmer Oct 11th 2007

There are easy ways to create webpage layouts, and there are hard ways. Spiffy Box is one of the easy ways to add a little spice to your website using CSS.

Spiffy Box was originally created as Spiffy Corners, a web based way to easily create and grab custom CSS and HTML code for rounded corner web content boxes without using images or JavaScript. It eventually moved on to its current user friendly four step process over at Spiffy Box, which uses an image for corners. Users generate the code by simply choosing an image width, height, corner radius, foreground, border and background colors. Steps two and three give you a preview of your new spiffy corner, and the CSS snippet to copy and paste. Step four provides the xhtml to add into our document and, poof; You have a soft, round CSS cornered box.

Tags: CSS, HTML, SPIFFY-BOX, SPIFFY-CORNERS, XHTML

Reader Comments (Page 1 of 1)

Radicoon said 10:44AM on 10-11-2007

I have to admit I've never gone looking for anything like this, but it looks promising! Downloading now =)

Radicoon said 10:47AM on 10-11-2007

...or bookmarking, you know ^^;;

Chris Gilmer said 10:52AM on 10-11-2007

I got a little concerned. Wasn't sure what application you were downloading? haha.. have fun creating CSS corners!

Todd said 11:26AM on 10-11-2007

I saw "roundy corners" on all of the Wheel of Fortune gameshow's graphics last night - the shark has been jumped.

"roundy corners" in GUI = semantic data

Greg-J said 4:19PM on 10-14-2007

As the creator of both sites I always try to stop in and say thanks when I see a new site referring visitors, so thanks.

Keep an eye on the sites too, I'll be doing more spiffy things soon.

Featured Time Waster

Civiballs is a beautiful, soothing physics puzzle Time Waster

I have an absolute weakness for physics games, and while Civiballs isn't the strongest physics-based game, what it lacks in the physics department it makes up for a few times over in style and fun.

In Civiballs, you are presented with a few colored balls, and your goal is to get those balls into the same-colored urn on the level. The "civi" part of Civiballs is that there are 3 sets of levels to play, each representing a different civilization. While the civilization doesn't affect gameplay, the artwork for each level is beautifully themed to it's appropriate era.

To play the game, you are given only one tool - a sword with which to cut the chains that are holding the balls. The puzzle part of the game is in figuring out what order, and with what timing to cut each chain. Do it right, and all the right balls end up in the right urns, with no stray balls entering an urn (a no-no). Do it wrong, and you get to start over again.

Civiballs is not terribly deep on gameplay; the entire game can be completed in about 15 minutes. But if you enjoy this type of game, it will be a very enjoyable 15 minutes.

View more Time Wasters