Make nice rounded corners with CSS
Why rounded ?
You have seen in many places nice designs that look very clean and professional. Nothing there was “super” if you looked the design. So simple but same time so beautiful. You do it almost same way , keeping it simple but you notice that what you’ve done looks so rigid looks like an old design and has nothing brilliant in it. It’s an “empty design”, without any personality if I can say like that.
Those mention above happens often because design is missing the final touch ups. let’s see an example:
What is the difference between those two? Small differences indeed but which one looks better? The one that has those little rounded corners off course 
So let’s see how do we create those little corners.
Everyone knows how to make the box without rounded corners. First of all, there is not a CSS implementation to automatically generate/support rounded corners. When I first learned CSS I was looking for something like that because I thought is strange that something that useful like that does not exist by default. But yes…it doesn’t. So we have to trick it ourselves.
What we will do is cutting the rounded corners from the image and wrap them along the normal box. It’s tricky because we have to deal with image editing but other easier way I couldn’t find.
So having the above rounded box will cut the four corners obtaining four little images. We should cut them as little as possible. That depends on what the radius of our corners is because that’s the minimal size we can cut.Next, we are using degrades or other fancy stuffs and not just pure background, we need one more little piece, cut that somewhere between corners, same height as the corners. The width can be 1 px even if the design permit(if you have horizontal degrade, than it’s better for that piece to be cut like this: with of the full box, so your degrade is showing nice and height of 1px.). If someone of you there wants to write a tutorial about making, cutting images in different image processors(maybe Adobe Photoshop) than the initiative is welcome. You can submit that here .
Those being said, we have the following images: topLeft.gif, topRight.jpg, bottomLeft.gif, bottomRight.gif, middle.gif. You can download all of them by clicking on images.zip.
Let’s now see how the CSS and HTML looks like. I did the wrappers for the top corners. You can do the bottom ones since you have there everything you need It’s easier than what it looks like
#box {
width:150px;
height:200px;
}#box_content {
width:148px;
height:100%;
border-bottom:1px #fdeffc solid;
border-left:1px #fdeffc solid;
border-right:1px #fdeffc solid;
background-color:#fef7fe;
}
.cornerWrapper {
height:9px;
padding:0;
font-size:4px;
}
.topLeft {
float:left;
width:10px;
height:9px;
background-image:url(images/topLeft.gif);
background-repeat:no-repeat;
}
.middle {
float:left;
width:130px;
height:9px;
background-image:url(images/middle.gif);
background-repeat:repeat-x;
}
.topRight {
float:left;
width:10px;
height:9px;
background-image:url(images/topRight.gif);
background-repeat:no-repeat;
}
And here is the HTML code:
<div id="box"> <div class="cornerWrapper"> <div class="topLeft"> </div> <div class="middle"> </div> <div class="topRight"> </div> </div> <div id="box_content"> </div> </div>
Here you go. Wanna see the result? Put those all tied together and thats it
Enjoy
Post a comment
RSS/XML