> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html>
> <head>
> <script src="jquery.js" type="text/javascript"></script>
> <script src="jquery.corner.js" type="text/javascript"></script>
> <script type="text/javascript">
> //<![CDATA[
> jQuery(document).ready(function(){
> alert('doc ready!');
> jQuery("#home_start_register_button").corner('bevel');
> });
> //]]>
> </script>
> </head>
> <body>
> <div id='home_start_register_button'>
> <form action="/registrations/start" method="post">
> <input type='submit' value='Register' />
> </form>
> </div>
> </body>
> </html>
>
> something funny happens:
>
> The corners are NOT rounded at all, but instead, the left lower corner
> is cut off / disappears.
So you're trying to put some corners on the div that holds your form?
It sounds like the div does not have sufficient padding. Have you
played around with that style?
This works fine for me:
<div id='home_start_register_button' style="padding:
10px;background:#ffc">
<form action="/registrations/start" method="post">
<input type='submit' value='Register' />
</form>
</div>
