It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming CSS Forum

Make rounded corners without images?

Make rounded corners without images?

Postby ebba on Mon Sep 19, 2005 10:41 am

Is it possible to make rounded corners of a DIV-box without using images?
ebba
 
Posts: 25
Joined: Mon Aug 16, 2004 7:37 pm

Postby webmaster on Mon Sep 19, 2005 10:56 am

There isn't any pre-made style for it, but you could make it like this:

Code: Select all
<html>
   <head>
      <style type="text/css">
         <!--
         body {margin: 20px 50px; font: 75% Verdana, Arial, Helvetica, sans-serif;}
         #container {background: #cccc99;}
         .roundtop {background: #ffffff;}
         .roundbottom {background: #ffffff;}
         .r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccc99;}
         .r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccc99;}
         .r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccc99;}
         .r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccc99;}
         .content {padding: 10px;}
         -->
      </style>
   </head>

   <body>
      <div id="container">
      <div class="roundtop">
         <div class="r1"></div>
         <div class="r2"></div>

         <div class="r3"></div>
         <div class="r4"></div>
      </div>
         <div class="content">
            <strong>Text</strong><br /><br />
            Some more text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text
         </div>

         <div class="roundbottom">
            <div class="r4"></div>
            <div class="r3"></div>
            <div class="r2"></div>
            <div class="r1"></div>
         </div>
      </div>
   </body>
</html>
Make sure to check out our TNX Review and Link Vault Review
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby ReFredzRate on Mon Sep 19, 2005 4:31 pm

I've seen this around at another forum as well. It seems like it can be easily messed up, when a browser's new version is released.
ReFredzRate
1000+ Club
 


Who is online

Users browsing this forum: No registered users and 0 guests