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?

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?

• javascript
• html
• css
• random
• colors

• Please specify if you are willing to use an SSSL or JavaScript – elimirks Commented Nov 18, 2012 at 23:22
• Randomly chosen once or per request? – alex Commented Nov 18, 2012 at 23:22
• 3 not possible with plain HTML/CSS – Zoltan Toth Commented Nov 18, 2012 at 23:22
• 1 Possible duplicate: stackoverflow./questions/10242999/… – salih0vicX Commented Nov 18, 2012 at 23:23
• see also stackoverflow./questions/1484506/… – user123444555621 Commented Nov 18, 2012 at 23:50

2 Answers 2

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 ment...

Instead of using pletely 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)];

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./2009/random-hex-color-code-snippets/#ment-34878