FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!

Create rounded corner, my way




Required:
top_left.gif 4x4px
top_right.gif 4x4px
bottom_right.gif 4x4px
bottom_left.gif 4x4px

You can create or slice the rounded corners in photoshop or fireworks, with any size but make sure you also edit
Code:
  height:4px;
    width:4px;

Code:
 
<style media="all" type="text/css">
<!--
body{
background: #CCCCCC;
color:#FFFFFF;
}

.corner{
    background:#FFFFFF;
    color:#333333;
}
.tl{
    background:url(img/[top_left].gif) no-repeat 0 0;
    height:4px;
    width:4px;
}

.tr{
    background:url(img/[top_right].gif) 100% 0 no-repeat;

}

.bl{
    background:url(img/[bottom_left].gif) no-repeat 0 100%;
    height:4px;
    width:4px;
}

.br{
    background:url(img/[bottom_right].gif) 100% 100% no-repeat;

}
-->
</style>


<body>

<!-- corner start -->
<div class="corner">

<!-- top corner start -->
<div class="tr">
<div class="tl"></div>
</div>
<!-- top corner end -->

<!-- Your content yada yada yada! -->
<div class="content">
hey this is the content area
</div>
<!-- Your content end-->

<!-- bottom corner start -->
<div class="br">
<div class="bl"></div>
</div>
<!-- bottom corner end -->

</div>
<!-- corner end -->


</body>

Please feel free to post your question.

If you need the tutorial to slice the corners, Just ask.



0 blog comments below




FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.