Besedilo na spletu običajno poravnamo levo, desno, sredinsko ali obojestransko. Z multimedijskimi vložki, kot so slike oz. grafike pa lahko besedilo »oblije« tudi te elemente. Z malo iznajdljivosti in CSS značko »shape-outside« pa lahko postanemo precej bolj kreativni.

Pozicioniranje slik v besedilu levo ali desno običajno rešujemo s CSS značko »float«, ki ji običajno dodamo še nekaj odmika, da se besedilo lažje »oblije« ob grafiki. Običajno so te linije ravne, kot smo jih vajeni iz časopisov in knjig. S CSS značko »shape-outside« pa lahko linijo oblivanja malo spremenimo in jo prilagodimo lastnim potrebam oz. kreativnosti.

Primer oblivanja lahko uporabimo tudi na sliki, ki je lahko okrogla, npr. žoga. Spodnji primer prikazuje oblivanje besedila v obliki kroga.

img { 
    float:left; 
    display: block;
    margin: 0 1em 1em 0;
    shape-outside: circle(50%); 
}

Primeri in možnosti CSS značke »shape-outside« https://www.w3.org/TR/css-shapes/

Preden uporabite CSS značko »shape-outside« se vedno prepričajte o njeni podpori. Na strani »Can I use« hitro ugotovimo, da je IE in EDGE brskalnik ne podpirata. Zato je uporabljajte previdno.