Styling jQuery ThickBox (round corners)

Question

Hello,

I'm using jQuery ThickBox plugin (http://jquery.com/demo/thickbox/). I have been concentrating on functionality so far and I have got it working exactly the way I want.

What I want to do now is to style the box so it has round corners. To make it more difficult, I would like the round corners to be transparent, so the background behind them stays visible.

Could somebody guide me through this process or at least link to some good tutorial on how to do this? I've been "googling" for some how-to article but I haven't found a thing.

Answer 1

The easiest solution for this is: Use the css for it

#TB_window {-moz-border-radius: 4px; -webkit-border-radius: 4px;)

The css3 suggestion says border-radius but I don't think that one is supported yet. There is only one problem with this. Internet Explorer doesn't support it yet, not even in IE8 as I've understood it but it should work in all the other browsers.

I do not think that you can do it any other way since thickbox doesn't seem to allow you to modify the layout that much. But if you have a fixed size on the thickbox you could create a background image with that size and make it transparent using your favorite imaging application.

#TB_window { background: #fff url(thickbox_background.png); border: none}