.

ROUND CORNERS! Beautiful, Image-free, Pure CSS, Code Here!

Easy-as-you-like! Adapt Square Boxes with Hassle-Free Curves

19 Jan
round corners without javascript or images picture

Give your site a design lift with this simple CSS code snippet. Simply choose a radius and drop it in a div for a real easy way to add curves without any images or javascript.

This is super-fast to do and works for all browsers except IE (so there's a surprise). Still, 60% of the market isn't bad for a few seconds work.

I'll write up the IE hack another time, but obviously that will take longer and involve some swearing.

Round Corners CSS Code

Here's the snippet, allowing for all good browsers:-

-moz-border-radius: 16px 16px 16px 16px;
-khtml-border-radius-bottomleft: 16px;
-khtml-border-radius-bottomright: 16px;
-webkit-border-bottom-left-radius: 16px;
-webkit-border-bottom-right-radius: 16px;
border-radius: 16px 16px 16px 16px;

.. play with those round corner radius values for larger or smaller round corners.

Now open up the stylesheet and append the style to whatever div box, like so:-

#someDiv {
	background-color:#CCCCCC;
	height:250px;
	margin:30px;
	width:570px;
	position:relative;
	-moz-border-radius: 16px 16px 16px 16px;
	-khtml-border-radius-bottomleft: 16px;
	-khtml-border-radius-bottomright: 16px;
	-webkit-border-bottom-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	border-radius: 16px 16px 16px 16px;
	}

And you're good to go.

Be Sociable, Share!

If you liked that ...

  • Video How-To: Save Money with Promo Codes - Nice & Easy

    Buying online? Wanna save a few bucks? Got 5 mins? This video shows you how, using promotion coupon codes, nice 'n easy. It's not exactly a science, but online shoppers after a bargain often fall short when it [...]

  • GA's 'Site Overlay' Creating Opaque Unlinkable Site

    The issue: Your website doesn't load properly after opting for a Click Pattern 'Site Overlay' on your Google Analytics Dashboard, instead rendering opaque. Links don't work, you can't see a way to disable the [...]

  • Video How-to: Add a Favicon

    If I had a Big Mac for every favicon tutorial out there, I'd be dead. But hey, I needed a favicon, and I figured a video illustrating the process may come in handy for some folks, so here goes. What is a [...]

  • Dividing the Hard Drive: Food for Thought

    Pre-OS-install, mapping out data/system demands for optimal disk segmentation saves headaches down the road. Here's a heads-up to help. You don't have to, but it is a mighty good idea to put pen to paper, [...]

  • Guvnr.com and Web Standards

    There's a lot of talk about web standards. Here's some more. What are web standards? Rules for producing well-coded, user-friendly websites, set down by a very important and useful group of gordo-geeks, [...]

  • About Guvnr & the_guv

    Hi.  My name's Olly Connelly.  Welcome to Guvnr. About Guvnr.com Guvnr launched in 2008 as a showcase for my Web, PC and Content services. [...]
... maybe you'll like these?
Posted on Tuesday, January 19th, 2010
Subscribe to Comments by RSS              Trackback from your blog

THE_GUV NEEDS YOU!!

.. to improve this post ..

Please clue me in. What's wrong or missing?

Or, hey, just pile on the praise ;)  Ah, yup, and fix a feed, fella.

Or link the page to your social network!

thank you, thanx, tx, ta, t, tsst, twaddle, cheek, cheers, cheerio



Say Something


.