Jump to content

Curvy Corner


Recommended Posts

Hi,This is the code that i am using in my web page.....but wat i ma getting at the bottom a staright black line.....which i dont want .but i dont know how to omitt that and also i want to know i want a div where the height shudl increse according to the content in it but dont know to do thatSo help me....<style>.curvy {position:absolute; width:300px; background:black; color:red; margin-left:310px ; top:20px;}#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:white; background:#F9BD05; overflow:hidden; font-style:normal; z-index:1;}#ctl {top:0; left:0;}#cbl {bottom:0; left:0;}#ctr {top:0; right:0;}#cbr {bottom:0; right:0;}.curvy em b {position:absolute; font-size:150px; font-family:arial; color:black; line-height:40px; font-weight:normal; }#ctl b {left:-8px;}#ctr b {left:-25px;}#cbl b {left:-8px; top:-17px;}#cbr b {left:-25px; top:-17px;}.curvy p {position:relative; z-index:100; padding:5px 10px;}</style><body><div class="curvy"><em id="ctl"><b>•</b></em><em id="cbl"><b>•</b></em><em id="ctr"><b>•</b></em><em id="cbr"><b>•</b></em><p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />Again, no graphics were used in the making of this demonstration.<br />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).</div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...