CSS Rounded Corners without using Images

3 08 2007

This post was not originally written my me… this is by my friend. Thanks to her. 

I was working on XHTML + CSS for few days and I really got fed up in using Images for rounded corners.The image size will be fixed and if I try to add more contents it will come out of the image.Or else two images should be used so that the content will fit to the image.But I was not satisfied in using two images.I referred a lot of tutorials but no where I got a solution in creating a rounded corners only using CSS without the help of Javascript and without using images.I tried,tried a lot and atlast got succeeded 🙂 .The idea may be so simple(b’coz even I am a fresher).Anyway,here’s the code.

HTML Code
<div>
<b class="roundedcornerobj">
<b class="roundedcornerobj1"><b></b></b>
<b class="roundedcornerobj2"><b></b></b>
<b class="roundedcornerobj3"><b></b></b>
<b class="roundedcornerobj4"><b></b></b>
<b class="roundedcornerobj5"></b></b>
<div id="maindiv" class="roundedcornerobjbg">
Sample Rounded Corners<br /><br /><br /><br /><br />
</div>
<b class="roundedcornerobj">
<b class="roundedcornerobj5"></b>
<b class="roundedcornerobj4"></b>
<b class="roundedcornerobj3"></b>
<b class="roundedcornerobj2"><b></b></b>
<b class="roundedcornerobj1"><b></b></b></b>
</div>

CSS

.roundedcornerobj *
{
display:block;
height:2px;
overflow:hidden;
font-size:.01em;
background:black
}
.roundedcornerobj1
{
margin-left:4px;
margin-right:4px;
padding-left:11px;
padding-right:11px;
border-left:1px solid aqua;
border-right:1px solid aqua;
background:aqua
}
.roundedcornerobj2
{
margin-left:2px;
margin-right:2px;
padding-right:5px;
padding-left:5px;
border-left:5px solid yellow;
border-right:5px solid yellow;
background:yellow
}
.roundedcornerobj3
{
margin-left:1px;
margin-right:1px;
border-left:5px solid orange;
border-right:5px solid orange;
}
.roundedcornerobj4
{
border-left:5px solid maroon;
border-right:5px solid maroon
}
.roundedcornerobj5
{
border-left:5px solid red;
border-right:5px solid red
}

.roundedcornerobjbg
{
background:pink
}

The above class denotes the “Center Part”.

As you all know <b> is used to display the text in bold.If we use any other tags like <p>
or <div> there will be a gap between one element and the other.We can avoid that but the
code will be more lengthy and confusing.Did you notice something in the HTML code?The <b>tags used next to the “main div” is in the reverse order(except the first <b> tag) of the <b> tag which is above the “maindiv”.You will be able to understand why that is done, by seeing the image below.In order to differentiate the usage of each <b> tag I have used multiple colors.The result will look like this.(Please view the full image)

sampleone1.jpg
Hope you understood now.But the color combination looks so stupid rite???Ok,let me give the same color for all.Then it will look like this.

sample2.jpg

Hope this tutorial gives you some idea on “How to make Rounded Corners without using Images”.Will come up with more tutorials in the upcoming blogs.

@Experts–Please pardon me if anything is wrong.Also share your views.

Advertisements

Actions

Information

One response

3 08 2007
CSS Rounded Corners without using Images « Blooming Webs

[…] Rounded Corners without using Images 3 08 2007 Post moved here […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: