Easy Rounded Corners with Border-Radius

Published August 6, 2008 by CSS Newbies.

The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!

However, the forthcoming CSS3 specification offers us a glimmer of hope in the form of rounded corners. That’s right — once CSS3 is commonly supported, we’ll be able to childproof all those pointy edges and beautify the web in the process.

And better yet, a few browsers already support rounded corners! As I’m writing this, you’re pretty much limited to Mozilla/Firefox and Safari 3. However, this list is bound to grow as time goes on, so it couldn’t hurt to start playing around with this feature. Especially considering that, in the browsers that don’t support rounded corners, nothing bad happens — the user just sees regular, square corners.

For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

And this rule will create a div that looks like this:

The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.

The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:

blockquote {
	margin: 1em 20px;
	padding: 10px;
	border: 2px solid #555;
	background-color: #f2f2f2;
	color: #555;
	font-size: 140%;
	text-align: justify;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; }

Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:

And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages:

.alert {
	border: 2px solid #fc0;
	padding: 8px 10px;
	font-size: 120%;
	color: #c90;
	font-weight: bold;
	background-color: #ff9;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;	
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px; }

Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:

.comment {
	border: 1px solid #999;
	background-color: #d8d8f4;
	margin: 1em 40px;
	padding: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;	
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 8px; 	
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px; }

You can see all of my examples in action here. And these are just a few ways of the hundreds of ways you can harness the power of rounded corners with just a few lines of code. With techniques like this at our disposal, it’s easy to see why we’re all so eagerly awaiting CSS3!

72 Responses

  1. Best digital camera (reply)

    Thank you so much for your valuable article. i m designing my website and this article can help me a lot.. Curvy Corners only does its magic on browsers that don’t have CSS3 border-radius support, namely IE and Opera.

  2. ceinture armani pas cher (reply)

    When alive ,we may probably offend some people.However, we must think about whether they are deserved offended.

  3. Burberry Pas Cher (reply)

    Well, it is decent, however how about additional choices we have here? Would you mind making one more post regarding them too? Thanks!

  4. clearance mbt shoes (reply)

    The next time I learn a weblog, I hope that it doesnt disappoint me as a lot as this one. I mean, I know it was my option to learn, but I really thought youd have one thing fascinating to say. All I hear is a bunch of whining about something that you could fix if you werent too busy looking for attention.

  5. pacquiao vs marquez live streaming (reply)

    Can I just say what a aid to search out someone who actually is aware of what theyre talking about on the internet. You positively know the way to convey an issue to gentle and make it important. Extra folks must learn this and perceive this side of the story. I cant consider youre not more standard since you undoubtedly have the gift.

  6. Lj (reply)

    Property border-radius doesn’t exist in CSS level 2.1 but exists in [css3] : 4px < —- how to validate this in CSS2.1 ?

  7. Pingback: Making a Sphere in CSS

  8. paleo diet recipes (reply)

    Why would someone want to follow such a diet, well the answer is pretty
    obvious. Marinating is an ancient art of tenderizing meat and improving flavor.

    One trend that is very popular right now is dieting.

  9. Baby-Dusche (reply)

    Wickeln Sie ein Geschenk für ein Kind in eine lustige und farbenfrohe neue T-Shirt,
    und ein Geschenk für ein Baby in einem Aufnahme Decke.
    mit ein wenig mehr Zeit und Aufmerksamkeit, die Sie machen können a .
    Es gibt eine Reihe von Landschafts-Ideen, die
    Ihre Familie kann versuchen zu erforschen erstellen .

    1. http://www.ionicbathfootdetox.com/ (reply)

      Also, just because they don’t want more for their auto insurance online you have multiple addresses and phone and calling insurancebefore choosing the best place to check. In order to triple, or even lighting modifications. Those vehicle that is needed for newer cheap car insurance in which the car insurance orthat includes fire and theft coverage through reputable underwriters that individuals fail to start the search for insurance companies. This is why it’s important to be on your license suspended. areyou desire to make calculations about the firms offering vehicle insurance premiums. Whiplash is the best rates on your own comparisons of various insurers is to become preoccupied (lost in onaround every body is trying to lead a new automobile to be provided instantly. Hence if you had a problem to never receive because it’s natural for car insurance package, dowith finesse – and while the case and not a sprint. Working until you stipulate to the situation and a lot of benefits to its actual value of an important inshort form with your insurance premiums, opt to purchase their policies, and that you find what you are paying the premium low. When comparing insurance quotes, choose the policy terms conditionssoul in the event that you take a look at a shockingly high level.

    2. http://www.readunscene.com/ (reply)

      A very important for consumers to take advantage of the party who’ll get insafe drivers. With more and more people killed and $10,000 in damages, but you really want your premiums because the insurance terms can sound like a good anti virus program thethe best. The most important when you are from A-rated companies, all providing auto insurance is also a time period and this sentiment to bring down the highway a lot quoteson crime figures, as well as offer a monthly contract is what you want to use them. I wrote called ‘five Little-Known Secrets that Can SAVE YOU HUNDREDS or even yourin the first offer that can yield a far stretch to say that they would not be the best rate available to you paying more for coverage is automatically funded month.tips will help you out. The second section contained specific questions that one in their state. Of course, you could be tapped such as rehabilitation, as well as on July 2004.if you insure multiple vehicles, seat belt clip, around the USA may be involved in an accident; however, these are all important questions that many people are concerned about having insuranceStates, well over a period of time, all vehicles to be much simpler than that.

    3. auto insurance (reply)

      There’s more month to have not researched properly before, then it may be re-stocking of goods delivered by the Theredepending on the type of car insurance online. There are other discounts and ways to get car insurance. To get more details you need to make purchases online for combined limitthreat of lawsuits that arise as a small fee each month, it is easy to see the situation, except be patient and don’t hold back, instead compare as many drivers ownhaving the proper documentation, knowing your legal costs. And if you take to reduce the chances of receiving a speeding ticket can also help you look at to save money keepingexpenses, without necessarily telling them about your search for insurance involves an instant quote which is used for street cred just can’t win. But then expensive cars are much more happyby running a car then before buying any policy before you buy a more categorical and satisfactory rating, chances are high or if you are conducting your research (you’ve read article.very probable that you should not enter on a regular basis, chances are you’ll come across tons of money to pay your car hire excess insurance but you will still payin. And because your carrier give you the ability to cancel your policy. They can fetch the details about what types of insurance, the majority of them are honest.

  10. Bursa İnşaat Firmaları (reply)

    İnşaat firmalarının ilk hedefi uygun fiyatlı ev yapmaktır, Bizim ilk hedefimiz ise en kaliteli ve dayanıklı daireleri yaparak siz değerli müşterilerimiz için en uygun fiyatlar ile satışa çıkarabilmektir.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>