Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Wednesday, July 1, 2009

Rounded corners using css

The simple way of using rounded corners using css with the header and the content in it.

HTML:
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Here is your Header!</h3>
</div>
<div class="contenth">
<div>No images!</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>

CSS:
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}


With this code you can easy create a fill based header and border based rounded corner content in it. Just customize the code to change the color if needed.
This article will tell you about the fill and borderd rounded corners.

Labels: ,

9 Comments:

Anonymous Anonymous said...

I have come across many ways of building rounded corners with css, and javascript. But here's one which I love a lot! http://theboxes.paradise.sg

It mentions in the site that you use a standard set of calls, and you can build any box found in its library. You can also make a box request if the box you are looking for is not there. I thought the 3D boxes found there are addictive!

Just my 2 cents worth. Cheerios.

July 4, 2009 at 1:45:00 AM PDT  
Blogger hemalatha said...

I used code of round corners... It is useful for me... but have doubt... how reduce the width of the border please send me code.

August 21, 2009 at 1:05:00 AM PDT  
Anonymous Anonymous said...

Add a div with the width specified and then start with the rounded corners, specified on the top...

for example:
<div style=width:300px">
<b class="b1h"></b>
......
</div>

August 22, 2009 at 6:41:00 AM PDT  
Anonymous Extendstudio said...

You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.

http://www.extendstudio.com/product/flexipanels_css.html

November 10, 2009 at 5:01:00 AM PST  
Anonymous Anonymous said...

I am using this on my website http://www.cityrox.com and found great work by you guys...

August 3, 2012 at 5:02:00 AM PDT  
Blogger otr214425 said...

INTERNATIONAL CONCEPT OF WORK FROM HOME
Work from home theory is fast gaining popularity because of the freedom and flexibility that comes with it. Since one is not bound by fixed working hours, they can schedule their work at the time when they feel most productive and convenient to them. Women & Men benefit a lot from this concept of work since they can balance their home and work perfectly. People mostly find that in this situation, their productivity is higher and stress levels lower. Those who like isolation and a tranquil work environment also tend to prefer this way of working. Today, with the kind of communication networks available, millions of people worldwide are considering this option.

Women & Men who want to be independent but cannot afford to leave their responsibilities at home aside will benefit a lot from this concept of work. It makes it easier to maintain a healthy balance between home and work. The family doesn't get neglected and you can get your work done too. You can thus effectively juggle home responsibilities with your career. Working from home is definitely a viable option but it also needs a lot of hard work and discipline. You have to make a time schedule for yourself and stick to it. There will be a time frame of course for any job you take up and you have to fulfill that project within that time frame.

There are many things that can be done working from home. A few of them is listed below that will give you a general idea about the benefits of this concept.

Baby-sitting
This is the most common and highly preferred job that Women & Men like doing. Since in today's competitive world both the parents have to work they need a secure place to leave behind their children who will take care of them and parents can also relax without being worried all the time. In this job you don't require any degree or qualifications. You only have to know how to take care of children. Parents are happy to pay handsome salary and you can also earn a lot without putting too much of an effort.

Nursery
For those who have a garden or an open space at your disposal and are also interested in gardening can go for this method of earning money. If given proper time and efforts nursery business can flourish very well and you will earn handsomely. But just as all jobs establishing it will be a bit difficult but the end results are outstanding.

Freelance
Freelance can be in different wings. Either you can be a freelance reporter or a freelance photographer. You can also do designing or be in the advertising field doing project on your own. Being independent and working independently will depend on your field of work and the availability of its worth in the market. If you like doing jewellery designing you can do that at home totally independently. You can also work on freelancing as a marketing executive working from home. Wanna know more, email us on workfromhome.otr214425@gmail.com and we will send you information on how you can actually work as a marketing freelancer.


Internet related work
This is a very vast field and here sky is the limit. All you need is a computer and Internet facility. Whatever field you are into work at home is perfect match in the software field. You can match your time according to your convenience and complete whatever projects you get. To learn more about how to work from home, contact us today on workfromhome.otr2144225@gmail.comand our team will get you started on some excellent work from home projects.


Diet food
Since now a days Women & Men are more conscious of the food that they eat hence they prefer to have homemade low cal food and if you can start supplying low cal food to various offices then it will be a very good source of income and not too much of efforts. You can hire a few ladies who will help you out and this can be a good business.

Thus think over this concept and go ahead.

September 10, 2014 at 9:11:00 PM PDT  
Blogger Omega software said...

This post is very helpful, edifying and in addition cool thoughts on the topic. It's very encouraging to find this site, can't wait to check out new stuff you post. CMS website development company || Web Designing || Website Development

January 7, 2015 at 11:58:00 PM PST  
Blogger Omega software said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck. Website Development in Mumbai || CMS Website Developer || Website Maintenance in Mumbai

January 7, 2015 at 11:58:00 PM PST  
Blogger wikisolpk1 said...

This article is very helpful in creating rounded corners in buttons , menus etc. Developer can make rounded corners using css easily. Web Development Company Islamabad

May 3, 2016 at 12:30:00 AM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home