Wednesday, February 20, 2013

Rounded box

Once upon a time (a long while ago), an "architect" level guy wanted to restyle a certain webpage. In that wacky company, an "architect" is a tell-er, who actually has NO CLUE how to do ANYTHING. They just wanted a rounded boxes because rectangles are not in style (among other things). Gee, I was uninformed... especially in area of CSS. So I did a <table> with <td> entries of background image of rounded arcs, created by carving a circle into 4 pieces, and lines, and the center being the meat. Yes laugh at me all you want. It does the trick but it is fairly clumsy.

The style to use is "border-radius", and there are "moz" and "webkit" versions to make Firefox and mobile browsers play nice:

Here, I am inside a round box
<style type="text/css">
div.myroundbox {
 border: 1px solid #CCCCCC;
    background-color: #EEEEEE;

   -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 padding: 10px;
} 
</style>

<div class="myroundbox">
Here, I am inside a round box
</div>
This is an excellent guide:
http://www.css3.info/preview/rounded-border/

No comments: