Topic: Another custom CSS corners question (Page 1 of 1)

While I'm waiting for a link from Skaarjj re: his custom borders and corners question, I thought I'd post my own question here. It's more of a theoretical question (kind of). Let's say you have a box, and you want to add custom corners to it. However, you don't really need a custom border--a simple 1 or 2 px CSS border will suffice. Is there any way to actually pull this off? The way I see it, if you give the box a border, any corners you try to add will appear inside the border, no?

So, is this possible, or is going the ALA route with simple 1 or 2 px borders the best bet here?

The only thing that comes to mind right now is having two divs of exactly the same size stacked on top of each other (actually one div nested in another div, just of the same size), the "lower" one with the regular box, and the "upper" one with the custom corners, but that so reeks of hack it's not funny.

I'm not making sense, am I...

[Edit: OK, I've been trying to rethink this problem, and the way I see it is this: there is no way to use custom corners with CSS borders because borders are always going to be on the outside of whatever is in the box, and if you want the corners to align to the corners of the box, then they must be inside the box.

I suppose I should confes--this is not a completely hypothetical question. I do have a specific problem in mind that cannot be solved by the ALA method I linked to above. I actually have found a solution to it that works in all browsers I have tested in (admittedly, not even close to all the browsers out there), but it is an incredible hack. I was just trying to figure out if there was a better way to do it. I know I'm being cryptic, but this project isn't ready to go public yet (and it's not my call anyway). When it is ready, it will be posted in the site reviews forum, and maybe then I'll ask this question again. Sorry for the confusing post.]

___________________________
Suho: www.liminality.org

Couldn't you stack two divs on top of each other with the top one being 2px wider than the bottom one?

Put your corners image in the top div and then only specify border-left and border-right for the bottom div.

I haven't actually tried that but it might be worth a go...

:::11oh1:::

The problem is that the divs need to be the same size (length), and the only way to do that is to put one inside the other (so it expands as the parent div expands). If I knew the exact dimensions of the area, yeah, it would work, but I don't...

Anyway, the more I look at the problem, the more I think my current solution is my best bet at the moment. Thanks for the idea, though.


___________________________
Suho: www.liminality.org