<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* **************
this could be for all images:
--- img { --- or...
***************** */
.imgNo1 {
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
        
    /* If you could do pseudo elements ----------------------------
       you could get a few more... */
    /* Also, HSL is awesome but don't use it if -------------------
       you need super old browser support */
}
.imgNo2 {
    /* #1 */
    border: 2px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 2px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 2px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 7px hsl(0, 0%, 80%),
        0 0 0 12px hsl(0, 0%, 90%);
    
    /* If you could do pseudo elements ----------------------------
       you could get a few more... */
    /* Also, HSL is awesome but don't use it if -------------------
       you need super old browser support */
}

</pre></body></html>