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