Rounded corners
posted April 17, 2008
Tired of boring, sharp corners for your divs? The following will provide different ways to making rounded corners possible on your site.
Using Images
The first way is probably the most commonly used way. Using images as the rounded corner.
I’ll be using these two images:
Simple stylesheet:
<style type="text/css">
.roundedcontainer
{
background:#00CCFF;
margin:0 auto 0 auto;
}
.roundedtop
{
background:#00CCFF;
position:relative;
height:30px;
}
.roundedleft
{
background:url(roundedleft.jpg)no-repeat;
position:absolute;
width:30px;
height:30px;
top:0px;
left:0px;
}
.roundedright
{
background:url(roundedright.jpg)no-repeat;
position:absolute;
width:30px;
height:30px;
top:0px;
right:0px;
}
.roundedcontent
{
background:#FFF;
padding:0 0 0 5px;
border:1px solid #00CCFF;
width:193px;
height:200px;
position:relative;
}
</style>
Simple HTML:
<div class="roundedcontainer">
<div class="roundedtop">
<div class="roundedleft"></div>
<div class="roundedright"></div>
</div>
<div class="roundedcontent"></div>
</div>
And here is the result:
Lorem ipsum stuff goes here.
CSS only:
The next way is using CSS3. This way probably only works with Firefox and Safari 3 right now, but I’ll show you anyway because it’s cool and easy.
Here’s the CSS:
<style type="text/css">
.roundedcorners
{
background-color: #ccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #000;
padding: 10px;
width:100px;
height:100px;
}
</style>
Explanation:
border-radius
This is basically what it looks like. It’s the radius of the border’s corners.
The HTML is even easier:
<div class="roundedcorners"> </div>
And this is what it looks like:
As you can see, it’s still not as good looking as using an image as the corner, but it’s way easier.
There are still alot of other ways that people have come up with for doing rounded corners. If you would like to see them, you can take a look at this.
[…] Like I mentioned earlier, this method can be used with almost anything like textareas. I would recommend to use this method if you know the element’s dimensions do not change, because the size is limited by the image’s size. If you’re just going for rounded corners, I suggest that you use the method I mentioned in a previous post. […]