How do I create CSS3 rounded corners and drop shadows?
I want to start experimenting with CSS3 on my Web site and would like to start with rounded corners and drop shadows, both of which would be mondo cool to include on my site. Is it too soon? If not, how do I create CSS3 border radius containers?
Ah, the ugly mess that is the evolution of Web standards. Whether it's HTML5 or CSS3, both are slowly and painfully becoming standards, but in the meantime, it turns out that there's much debate and contention about even the simplest of features.
Like rounded corners.
In the CSS3 spec, rounded corners are specified as border-radius: though it's implemented differently in the Mozilla family of browsers (including Firefox) than the Webkit (Safari) group.
What this means is that if you're running, say, Internet Explorer or an older version of one of these browsers, odds are good you won't see anything happen when you specify the right CSS attribute.
Here's an example:
The code for this to work is:
<div style="background-color:#ccf;padding:8px;border:2px solid black;border-radius:10px;">This should be a box with nicely rounded corners.</div>
Not too bad to use, but why they can't just accept "border-radius", well, that's part of the adventure of web standards, I suppose.
Now, what about a drop shadow? That's done with the css attribute box-shadow, which takes three parameters: horizontal offset of the shadow, vertical offset of the shadow, blur factor and color. Complicated, eh?
Here's how it could be used in cooperation with the earlier rounded box:
Bet there's no shadow, though. Turns out that there's great debate about how to implement box shadow, so in fact you need to match the CSS3 model of your browser for it to even have a possibility of working.
Did that work for you? If you're on a modern browser it probably did. Cool, right? Yeah, except here's the CSS3 required to make this work:
Here's the code I'm using for this to work:
<div style="background-color:#ccf; padding:8px; border:2px solid black; border-radius:10px; box-shadow: 8px 8px 4px #666;-o-box-shadow: 10px 10px 5px #888;-icab-box-shadow: 10px 10px 5px #888;-khtml-box-shadow: 10px 10px 5px #888;-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;">This should be a box with nicely rounded corners and a drop shadow.</div>
More than a bit of work, but at least it does render properly in modern browsers, and that's pretty darn slick.
Keep track of what's happening in the world of CSS3 by tracking http://www.css3.info/ too.
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....✔ Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...✔ Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....✔ How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...✔ How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+