Rounded Corners

by NinjaSk8ter

HTML

<script src="http://www.northernvirginiapaintingcontractor.com/Scripts/jquery.corner.js"></script>
<script src="http://curved-corner.googlecode.com/border-radius.htc"></script>
<div id="lower-featuretopleft" class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ipsum, pharetra vitae tempus in, aliquet in nibh. Morbi euismod est et neque malesuada porta. Aliquam congue, sapien tempor volutpat accumsan, orci magna ultricies felis, eu ultrices sem justo ut tortor. Integer eu justo a felis vehicula fermentum. Nulla facilisi. Donec at lorem elit, ac sagittis purus. Integer sit amet eros elit. Donec pulvinar orci adipiscing nulla condimentum in placerat risus egestas.</p>
    <a id="interior-button" href="#" class="rounded"></a>
</div>

CSS

#lower-featuretopleft {
    height:200px;
    width:292px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#FF6D00;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

	behavior:url(border-radius.htc);
}
#lower-featuretopleft p {
    color: #333366;
    margin: 0 0 0 0;
    font-size: 11px;
    /*line-height:14px;*/ 
    padding: 5px 5px 0 5px;
}
#interior-button {
    height: 27px;
    width: 150px;
    float:right;
    vertical-align:bottom;
    position:relative;
    margin: 10px 5px 0 0;
    background-color: Yellow;
}

JavaScript

jQuery(function ($) {
    $('.rounded').corner('8px');
});

jQuery(function ($) {
    $('.box').hover(function () {
        $(this).stop().animate({
            "opacity": .5
        }, 200)
    }, function () {
        $(this).stop().animate({
            "opacity": 1
        }, 200)
    });
});