2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by macneato
0

I'd go about it by positioning containers relatively, then having all the corners positioned in a sprite relative to that container. Using a transparent GIF would probably do the trick.

Eg.

.right_roundedcorners {position:absolute;background:url(../images/right_module_corners.jpg) no-repeat; width:10px; height:9px;}
		.right_topleft_c {top:0; left:0; background-position: 0 0}
		.right_topright_c {top:0; right:0; background-position: -10px 0}
		.right_bottomleft_c {bottom:0; left:0; background-position: 0 -9px}
		.right_bottomright_c {bottom:0; right:0; background-position: -10px -9px}

Your html would be structured like this

<div class="inside">
					<jdoc:include type="modules" name="right" style="xhtml" />
						<!-- Begin corners -->
						<div class="right_roundedcorners right_topleft_c"></div>
						<div class="right_roundedcorners right_topright_c"></div>
						<div class="right_roundedcorners right_bottomleft_c"></div>
						<div class="right_roundedcorners right_bottomright_c"></div>						
						<!-- End corners -->
            	</div><!-- end inside -->
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.