How to create a Design News box with the curled bottom right corner
Posted: 13 April 2006 12:34 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2006-04-13

I am trying to figure out how to get this box with the curled bottom right corner to work. It can be found on the home page of cssdrive. Anyways, I can’t get the border from the container box to disappear below the image in the bottom right corner.One div box is always around the other div that contains the image. Please shed some light on this.

HTML

<div class=“curler”>
<div class=“box”>
Members Login
<form action=”#” method=“post” name=“login”>
Username:
<input type=“text” maxlength=“30” name=“usrn”><br >
Password:
<input type=“password” maxlength=“15” name=“pswrd”><br >
<input type=“submit” name=“btn_submit” value=“Login” class=“btn”>
</form>
</div>
</div>

CSS

.box {
border: solid 1px #CCCCCC;
padding: 5px 5px 5px 5px;
color: #495468 ;
z-index: 1;
}

.curler{
background: transparent url(/GroupanalyzerII/images/corner4.gif) right 100% no-repeat;
margin: 5px;
z-index: 2;
}


NOTE: the image can be found on the home page of css drive

Thanks,

zindex

Profile