Recently I was working on iPhone-specific web-based login pages, and for the sake of consistency I wanted to mimic the rounded-corner look of the iPhone interface. I looked around for solutions, but everything I could find either used images, Javascript or both, which seemed like serious overkill for this purpose.
Long story short, I ended up putting (hacking?) together my own solution, one which relies solely on CSS to render the rounded corners, using the structure shown in the image to the right. The end result looks something like THIS and it works in both IE and Firefox.
I think it’s a fairly elegant way to do this, and I’m pretty sure somebody else somewhere must have figured this out already (considering the number of people who are significantly better at CSS than I am) but since I couldn’t find anything similar out there, I decided to share it here.
The complete CSS/HTML template is as follows:
<style type="text/css">
/* classes for rounded corners */
.crntop, .crnbottom {
display:block;
background:transparent;
font-size:1px;
}
.crn1, .crn2, .crn3, .crn4, .crn5, .crn6 {
display:block;
overflow:hidden;
}
.crn2, .crn3, .crn4, .crn5, .crn6 {
background:#b80000;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
.crn1 {
height:1px;
margin:0 9px;
background:#000000;
}
.crn2 {
height:1px;
margin:0 6px;
border-width:0 3px;
}
.crn3 {
height:1px;
margin:0 4px;
border-width:0 2px;
}
.crn4 {
height:1px;
margin:0 3px;
border-width:0 1px;
}
.crn5 {
height:2px;
margin:0 2px;
border-width:0 1px;
}
.crn6 {
height:3px;
margin:0 1px;
border-width:0 1px;
}
</style>
<div class="container">
<span class="crntop"><span class="crn1"></span><span class="crn2">
</span><span class="crn3"></span><span class="crn4"></span><span class="crn5"></span><span class="crn6"></span></span>
<div class="content">CSS-only rounded corners</div>
<span class="crnbottom"><span class="crn6"></span><span class="crn5"></span><span class="crn4"></span><span class="crn3"></span>
<span class="crn2"></span><span class="crn1"></span></span>
</div>
That’s really impressive.
Great job, I love this css tricks.
Although I haven’t tried it, the CSS selector -webkit-border-radius supposedly works on the iPhone. See http://www.westciv.com/iphonetests/
For mozilla, use -moz-border-radius.
For IE, use conditional comments to include the great CSS you have developed above.
However, I don’t think the above selectors will validate.
First let me congratulate you because I can see you spent quite a few hours doing that and the effect is indeed absolutely nice, I’ll give you that. Secondly, I just think you were better off using just images, you just killed the whole idea of semantic HTML, I happen to think what you did is nonsense.
Thanks for the feedback, I’m not sure if I should feel complimented or feel insulted, haha.
Nobody disputes that in general it makes way more sense to use images and/or JavaScript, but – like the description says – it was inspired by one of those odd cases where neither made much sense.
Yeah, the practical utility of this solution is pretty limited so just accept it for what it is: a neat trick. 😉
Ivan,
I think you’re a dick.