il_mix Posted April 17, 2012 Share Posted April 17, 2012 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! Link to comment Share on other sites More sharing options...
Ingolme Posted April 17, 2012 Share Posted April 17, 2012 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 More sharing options...
il_mix Posted April 17, 2012 Author Share Posted April 17, 2012 ######...So, I must work with multiple div and background images. Thanks anyway! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.