rounded DIV corners

[ohdang888]

hey.

how do you make rounded corners for a DIV?

 

nothing i am findin on google is productive

[sKunKbad]

There are a number of ways to do it, but the fast and easy way is to have three divs stacked. Top div holds an image of the top of the box (rounded in this case). Content goes in the second div. Bottom div holds an image of the bottom of the box (rounded in this case).

[Daniel0]

border-radius: 10px;

There is just one problem though. Few browsers support this.

 

Check this out: http://www.alistapart.com/articles/customcorners/

[dbrimlow]

Actually, rounded corners via css is common, cross-browser compatible and extremely easy to do:

 

This site I made a while ago uses css for the rounded corners and it even works in Mac IE 5.1:

 

http://www.regisresidential.com/home.php

 

 

In a nutshell what this does is like using progressively shorter leggo blocks stacked one atop the other to create the illusion of round.

 

In this case it uses a series of 2px high colored boxes, each with a margin left/right margin that gets progressively shorter.

 

Here is the css:

 

/* styles for rounded corners */

b.rtop, b.rbottom{display:block;background: #EFE2D3}

b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #800000}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px}

 

Here is the markup:

<div id="navcontainer">

<b class="ntop">
   <b class="n1"></b> 
     <b class="n2"></b> 
       <b class="n3"></b>
         <b class="n4"></b>
</b>
    <div class="navHeader">Section Links</div>
    <ul id="navlist">
      <li class="onpage">Home</li>
      <li><a href="apartments.php">Apts for Rent</a></li>
      <li><a href="apartments2.php">Apts for Sale</a></li>
      <li><a href="aboutus.php">About us </a></li>
      <li><a href="contactus.php">Contact us </a></li>
    </ul>
<b class="nbottom">
  <b class="n4"></b>
    <b class="n3"></b> 
      <b class="n2"></b> 
        <b class="n1"></b>
</b>

 

It is a classic technique that doesn't require any graphic.

 

Although, in my case I use a 2px wide by 25px high graduated color graphic - black on the bottom and graduating to the same color as the boxes - as the main div background to give it a little more "design".

 

[monkeytooth]

This may be a silly fix.. how bout one div layer to do what you want to do.. but within that layer layout a table 3x3 go in your favorite art program make a box with rounded corners, and cut it 3x3 then lay it out in the table accordingly.. put what you want in the middle part of the table and do what you will with the div layer

o

----------

o

|

Content

|

o

----------

o

 

just a thought..

[dbrimlow]

While that works, visually, that's very old school technique.

 

It's fine for a personal site, where SEO and usability don't matter, but for a business it is sure death.

 

Aside from the fact that using tables for layout is unprofessional, the key to today's business websites is to reduce page weight as much as possible and to maintain as small a percentage of code to text % ratio  as you can ... otherwise the Google bot will get fed up and toss it into the low index pile.

 

Your solution is also a potential cross-browser problem. Unless you use very tight, well formed and standards compliant html and css, your "layer" (position:absolute) will be all over the place from browser/platform to browser/platform.

 

The old way was to nest tables like crazy. While THAT works in all browsers, it makes the code so heavy and convoluted it looks like it was generated by a Microsoft application's "convert to web page" tool (ever see the code of those? Yikes!)

 

Here's an example of that technique - I was still just learning css back then and too lazy to use a css technique instead - look at the code and try to make sense of the nesting:

http://jhrenovations.com/services.html

 

And on top of all that, the tables use a small graphic for each corner, then a small graphic for each of the four sides - which further adds to the page weight:

 

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

 

The css rounded-corner technique is clean and easy and only ups page weight by nano-seconds.

[ohdang888]

i used your code, but look what happened. no rounded corners.... (the screenshot is attached)

 

what am i doing wrong??????????

 

heres the code:

<div id="navcontainer" style="background-color:black">

<b class="ntop">
   <b class="n1"></b> 
     <b class="n2"></b> 
       <b class="n3"></b>
         <b class="n4"></b>
</b>
    <div class="navHeader">Section Links</div>
    <ul id="navlist">
      <li class="onpage">Home</li>
      <li><a href="apartments.php">Apts for Rent</a></li>
      <li><a href="apartments2.php">Apts for Sale</a></li>
      <li><a href="aboutus.php">About us </a></li>
      <li><a href="contactus.php">Contact us </a></li>
    </ul>
<b class="nbottom">
  <b class="n4"></b>
    <b class="n3"></b> 
      <b class="n2"></b> 
        <b class="n1"></b>
</b>

 

 

[attachment deleted by admin]

[dbrimlow]

What was your css?

[Northern Flame]

http://www.html.it/articoli/nifty/index.html