-
200618 Nov
Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.
The simplified HTML code is:
<div class="curves top"> <img src="https://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10" height="10" alt=""/> </div> <div class="box"></div> <div class="curves bottom"> <img src="https://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10" height="10" alt=""/> </div>
The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).
The basic CSS is:
div { margin: 0; padding: 0; width: 100px; background-color: #ff0000; } .box { min-height: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .curves { display: none; }This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.
To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:
<!--[if IE]> <style type="text/css"> .box { min-height: 80px; } .curves { display: block; height: 10px; } .top { background: #ff0000 url('images/topr.png') no-repeat right top; } .bottom { background: #ff0000 url('images/botr.png') no-repeat right top; } </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css"> .box { height: 80px; } <![endif]--> </style>The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.
Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.
Of course there are other solutions for this, but I thought this way was quite simple.
You can skip to the end and leave a response.
-
Comments
-
01.
hmm its right! css3pie id best technology ever.
-
02.
-
03.
alix says:Comment » July 14th, 2012 at 3:21 pm
Hi
When I was in my previous job our graphiste was loving curved corners
Oh my … We made a lot different version of round box User Controls (ASP.net)BUT finally a day I decided to resolve this problem
FIRST DIE TO IE, I HATE IE beeeb IE beeeb IEOK what’s the salvation for us in IE FF SAFARI CHROME and even NetScape(oh grandfather)
/*IE*/
behavior:url(/css/PIE.htc);
/*google it for download. If I don’t mistake it’s(PIE) one type of vml*/
z-index:1 /*or more*/
border-radius:4px;/*I think that was for chrome and safari*/
-webkit-border-radius: 4px;/*netscape (limited)*/
-khtml-border-radius: 4px;/*mozilla*/
-moz-border-radius: 4px;/*OPERA : thank you friends for telling this opera trick at this page*/
-o-border-radius: 4px;
-opera-border-radius: 4px;However still I’m using Opera 10.00 for testing my markups and I have not seen any radius so far but based on the comments of our friends in this page I’m hopeful for the future of opera.
Have a sweet time
-
04.
I love this website and still have bookmarked it. Let me return to learn in more details on my tripThank you.
-
05.
its actually very nice to know that there still some websites that offers precious and valuable content for completely free :)
-
06.
Have you ever thought about adding a little bit more than just your articles?
I mean, what you say is important and all. But think about if you added some great pictures or video clips to give
your posts more, “pop”! Your content is excellent but with pics and clips, this
blog could definitely be one of the best in its niche.
Superb blog!
-
01.
