Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This should allow you to get the desired result. Old stacked DIVs method, with a single big background image .You have to create a very big background image, e.g. 2000 x 2000 pixels, where you will draw a rectangle with rounded corners. I recommend to save it as a .GIF with transparent background to ensure compatibility with IE6, since you want to avoid JavaScript. Note that borders, in the example, are just to help figuring out where element are appearing and can be removed.</p> <p>I tested it on IE6, IE7, Firefox 2 and 3, Safari and Opera. Hope this helps.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .RoundRectInside { width: 100%; background: url(BigBackground.gif) top left no-repeat; overflow: hidden; } .RoundRectOutside { width: 20em; height: 20em; background: url(BigBackground.gif) bottom left no-repeat; overflow: hidden; position: relative; } .RoundRectTopRight { float: right; /* Width and Height should correspond to width and height of rounded corner */ width: 30px; height: 30px; background: url(BigBackground.gif) top right no-repeat; overflow: hidden; position: absolute; top: 0; right: 0; } .RoundRectBottomRight { float: right; /* Width and Height should correspond to width and height of rounded corner */ width: 30px; height: 30px; background: url(BigBackground.gif) bottom right no-repeat; overflow: hidden; position: absolute; bottom: 0; right: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="RoundRectOutside"&gt; &lt;div class="RoundRectInside"&gt; &lt;div&gt;Content goes here&lt;/div&gt; &lt;div class="RoundRectTopRight"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="RoundRectBottomRight"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload