Question

I’ve been trying to change fancybox’s border color from white. I’ve succeeded in targeting every part of fancybox except the border. How can I change the color of the fancybox border?

Answer 1

If you’re using 1.3.4, the border is in #fancybox-content css rule. A quick firebug or devtools inspect will tell you that.

UPDATE [March 2015] for both versions:

For Fancybox v1.3.4

<style type="text/css">
#fancybox-content {
 border-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

For Fancybox v2.0.x

<style type="text/css">
.fancybox-outer {
 background-color: #FF0000; /* or whatever */
}
</style>

For Fancybox v2.1.x

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

Notice the difference between fancybox v2.0.x and v2.1.x