test
.curvy {width:300px; background-color:#9CAF9C; color:#333333; margin:5em auto;}
b {overflow:hidden; height:20px; width:20px; z-index:2; position:relative;}
span{font-size:82px; color:#9CAF9C; background-color:#FFFFFF; line-height:0.6em; z-index:2; position:relative; display:block}
b.cur_l{ margin-left:0px; float:left;}
b.cur_r{ margin-right:0px; float:right;}
b.cur_l span{ margin-left:-7px;}
b.cur_r span{ margin-left:-22px;}
div.cur_t b span{ margin-top:-9px;}
div.cur_b b span{ margin-top:-29px;}
.curvy p {padding:25px 10px; font-size:14px; margin-bottom:-16px; z-index:100; position:relative; }/* IE Fix */
*html b{ background-color:#FFFFFF; overflow:hidden;}
*html span{font-size:50px;}
*html b.cur_l span{ margin-left:-3px;}
*html b.cur_r span{ margin-left:-28px;}
*html div.cur_t b span{ margin-top:12px;}
*html div.cur_b b span{ margin-top:-12px;}
*html .curvy p {margin-bottom:0px;}/* Opera Fix */
html:first-child span{font-size:50px;}
html:first-child b.cur_l span{ margin-left:-4px;}
html:first-child b.cur_r span{ margin-left:-27px;}
html:first-child div.cur_t b span{ margin-top:-5px;padding-top:12px;}
html:first-child div.cur_b b span{ margin-top:-22px;padding-bottom:7px;}
html:first-child .curvy p {margin-bottom:-15px;}
●●
I know it's been done before, but not this way!
A box with curved corners into which you can put text that goes right up to the corners.
Again, no graphics were used in the making of this demonstration.
All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).
●●
