Create rounded corners using css easily…..

Someone who new to CSS layout from normal table before wanna create a new css content container/box maybe need to read this entry. I’ll guide you how to create one rounded contents container using css style, create as simply as you couldnt do by normal template using table tag before.

Firstly, you must review your rounded table before. If you use Table to do, you have 2 ways to create round corner box.

1. Using 2 images:(table width cant to be resized)

table11

This way is so easy and doesn’t cost time much, but when table has to be resize because some reasons, the table will look terible, it’ll not be rounded corner because of the images can not be resize as table.
I did not like this way before, but sometime, it make me comfortable because simply and easy to do.

2- Using 4 images:

table2

You must have 4 images, and each image, you must add to each TD tag. Table can be resized without broken if you set width and height property for each TD which added image into. This table contains: 3 rows and 3 columns, it is harder than above one, but it was a good choice for designer and perfect way to make a rounded box, but ……….it was killed by the CSS.

Make a rounded box using CSS

When using CSS to create one rounded corner box, you still need some images as above, but it’ll be easier than using table and the code is simple. It’s can be made with any editor such as Dreamweaver even with … Notepad.

1. Using 2 images and 2 DIV tag:

div1

Now, you can see in the top div, it contains rounded border by one image and the bottom div contains one image rounded border. The code will be:

  1. <div id=“top-round”>
  2. <div class=“bottom-round”>
  3. Your Container Content Here
  4. </div>
  5. </div>

So, we need to some css code to make it work. Simple copy this code below into your css stylesheet section.

  1. #top-round {
  2. width: 960px;
  3. padding: 0;
  4. background: #fff url(images/roundedtop.gif) top left no-repeat;
  5. margin-top: 20;
  6. margin-right: auto;
  7. margin-bottom: 20px;
  8. margin-left: auto;
  9. }
  10. #bottom-round {
  11. background: transparent url(images/roundedbottom.gif) bottom left no-repeat;
  12. padding: 20px 20px 10px 20px;
  13. margin: 0;
  14. }

This method is good to use for design container content of web, the width of web page will not resize. If not, it’ll be broken same as Table way above my entry. Honestly, it’s more simple than same way in Table,

2. Using 4 images and 4 div tag:

div2

There’re 4 border images and we must use 4 div for each image border. See the HTML code and CSS code below to find out how it working.

HTML:

  1. <div id=“top-left”>
  2. <div id=“top-right”>
  3. <div id=“bottom-left”>
  4. <div id=“bottom-right”>
  5. Hello, dont just read and go, comment if you like my entry.
  6. </div>
  7. </div>
  8. </div>
  9. </div>

CSS:

  1. div#topleft{background:#e8eef5 url(images/left_top.gif) no-repeat; width:100%;}
  2. div#topright{background:url(images/right_top.gif) no-repeat top right;}
  3. div#bottomleft{background:url(images/left_bottom.gif) no-repeat left bottom;}
  4. div#bottomright{background:url(images/right_bottom.gif) no-repeat right bottom; padding:10px;}

And the result is something like this:

div4

HTML:

  1. <div id=“outsite”>
  2. <div id=“inner”>Your content here</div>
  3. </div>

CSS:

  1. #outsite {
  2. height: 300px;
  3. width: 500px;
  4. margin: 0 auto;
  5. }
  6. #inner {
  7. background: #e8eef5;
  8. -webkit-border-radius: 6px;
  9. -moz-border-radius: 6px;
  10. padding: 10px;
  11. }

This method will be awesome if it works in IE ^^. At this moment, i dont know how to make it works in IE, but it still works perfect in Firefox.

There’re so many ways to create round corners box using css but these above are most simple i know. Forget Table now!

Advertisements

One Response

  1. Would this be something that anyone could deal with?

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: