Mr.Shawn Posted February 29, 2008 Share Posted February 29, 2008 I wanted to use the phpBB rounded corners for my personal site but I couldn't get it to work. I assume I had got all the css elements. Anyone have the solution on how to make the phpbb css version of rounded corners to work? span.corners-top { background-image: url("corners_left.png"); } span.corners-top span { background-image: url("corners_right.png"); } span.corners-bottom { background-image: url("corners_left.png"); } span.corners-bottom span { background-image: url("corners_right.png"); } span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span { font-size: 1px; line-height: 1px; display: block; height: 5px; background-repeat: no-repeat; } span.corners-top { background-image: none; background-position: 0 0; margin: 0 -5px; } span.corners-top span { background-image: none; background-position: 100% 0; } span.corners-bottom { background-image: none; background-position: 0 100%; margin: 0 -5px; clear: both; } span.corners-bottom span { background-image: none; background-position: 100% 100%; } And the html <div id="test"> <span class="corners-top"><span></span></span> <div>test</div> <span class="corners-bottom"><span></span></span> </div> Quote Link to comment Share on other sites More sharing options...
haku Posted February 29, 2008 Share Posted February 29, 2008 If you don't tell us how its not working, its hard to tell you how to make it work. A link may be nice as well. Quote Link to comment Share on other sites More sharing options...
Mr.Shawn Posted March 1, 2008 Author Share Posted March 1, 2008 Sorry about that. Well, the problem is that it doesn't shows the rounded images which means it is not rounded. Quote Link to comment Share on other sites More sharing options...
haku Posted March 1, 2008 Share Posted March 1, 2008 Your problem may lie here: span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span { font-size: 1px; line-height: 1px; display: block; height: 5px; background-repeat: no-repeat; } You didn't set a width, so I'm suspecting that they have a width of zero rendering them invisible. If its not that, post a link. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.