Random Border-Color CSS

Question

I have 5 list items on my page, with the following CSS applied to them:

#content .gallery_work ul li {
    background-color: #FEF5D6 !important;
    border-right: 15px solid blue;
    color: #373C46;
    float: left;
    font-size: 13px;
    height: 250px !important;
    margin: 10px !important;
    text-align: center;
    width: 225px !important;
}

what I'd like to have is 5 possible border colors, and for each li to get one of the colors randomly applied to it.

Does anyone know how this can be done?

Answer 1

Just generate a number in JavaScript or your server side language of choice.

You could do it in JavaScript...

var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);

...or PHP...

$color = "#" . dechex(rand(0, 0xFFFFFF));

Your comment...

Instead of using completely random colors, is there a way I could declare a number and then have it randomly choose from them?

Yes, for example...

$colors = array("#000", "#fff");

$randomColor = $colors[array_rand($colors)];

Answer 2

A solution that covers all edge cases, as in add proper zero padding:

function randomColor() {
    return (function(h) {
         return '#000000'.substr(0, 7 - h.length) + h;
    })((~~(Math.random() * (1 << 24))).toString(16));
}

Originally by Remy Sharp: http://paulirish.com/2009/random-hex-color-code-snippets/#comment-34878