Jump to content

border render order


Recommended Posts

Hi everyone! I need to create a div with black left-right borders and grey top border. What I want is that the left-right border are OVER the top one. Thinking of it as an image, I want that all left/right side pixels are black; alternative view, all top pixels are gray but the first and the last ones (that are black). Check the attached image.What's happening is that the top border is over the side ones; that's no good.Furthermore, it's over the left one in Internet Explorer, and over the right one in Chrome-Firefox; that's really NOOO good! Is there a way to specify a sort of "rendering order" of borders? Or any other way to get the result I need? I made a simple test on the "Try it yourself" page of w3schools. Here's the code:

<html><head><style type="text/css">p.one{border-top:1px solid #aaa;border-bottom:1px solid #aaa;border-left:1px solid #000;border-right:1px solid #000;}</style></head><body><p class="one">Some text.</p></body></html>

and attached you can find the results on the various browsers. The images are zoomed, because the effect is not easily noticeable. I've attached the expected result as well (manually edited in an image editor). Thanks for your help!




  • Like 1
Link to comment
Share on other sites

You can't specify any order. The borders are supposed to cut eachother diagonally. At the scale of 1 pixel, browsers will show it one way or another based on how they implemented their rendering algorithm.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...