Round corners with CSS only without images

This is a <div> with round corners without using image

I’ve recently been involved in a web development project, which I need some round corners for some tabs in order for the web pages to look cool! (As shown above) Round corners on tabs, boxes of contents or menus will always make your web page look so appealing and neat.

I’m not a graphic guy, and I don’t like the idea at all to make some images to fill up the four corners to make them curve. It’s always the best that we can put up some round corners by simply using some CSS (Cascading Style Sheet).

By googling around, I’ve found this neat method, which you just need some simple CSS, and you can have those <div>, <span>, <li> to have their corners rounded.

And the best is this method is so easy that you can freely have one or two or three or all four corners rounded. And there isn’t any image needs to be loaded. All you need is to put up some CSS as follows:

For example, you wanna have a <div> which four corners are round. You’ll first have to include the following CSS in your webpage. And in this example, we make a <div> with round corners, and this <div> is denoted by the CSS class “roundDiv1″

<style>
.roundDiv1
{
background:#BB0000; color:#fff; margin:0 8px;
font-family:verdana,arial;font-size:9pt;
font-weight:bolder;text-align:center;width:450px;
}
.rtop, .rbottom
{
display:block;
background:#fff;
}
.rtop *, .rbottom *
{
display: block;
height: 1px;
overflow: hidden;
background:#BB0000;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
</style>

1. The <div class=”roundDiv1″> to have four round corners, the HTML code will be as follows:


DIV with four round corners
<div class=”roundDiv1″>
<b class=”rtop”><b class=”r1″></b>
<b class=”r2″></b> <b class=”r3″>
</b> <b class=”r4″></b></b>
DIV with four round corners
<b class=”rbottom”><b class=”r4″></b>
<b class=”r3″></b> <b class=”r2″></b>
<b class=”r1″></b></b>
</div>

2. The <div class=”roundDiv1″> to have two top round corners only:


DIV with two top round corners
<div class=”roundDiv1″>
<b class=”rtop”><b class=”r1″></b>
<b class=”r2″></b> <b class=”r3″>
</b> <b class=”r4″></b></b>
DIV with two top round corners

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Round corners with CSS only without images”


  1. No Comments

Leave a Reply

You must login to post a comment.