Is it possible to nest one VML roundrect within another?

Question

For example:

<v:roundrect style="display:block;width:100px;height:100px;" fillcolor="#eee">
Hi
    <v:roundrect style="display:block;width:50px;height:50px;" fillcolor="#c00">
        Hey
    </v:roundrect>
</v:roundrect>

I can't see the background of the inner roundrect when I use this markup.

Any ideas?

This is an interesting article that touches on some of this, ultimately settling on an unusual but workable way of using vml shape paths: https://kontent.ai/blog/emails-outlook-containers-rounded-courners — Nathan, Dec 01 '21 at 04:32

score 5 · Accepted Answer · answered Mar 21 '10 at 21:08

5

No VML shapes can be nested inside each other. You need to position them so they overlap correctly.

<div style="position:relative;">
  <v:roundrect style="display:block;width:100px;height:100px;" fillcolor="#eee">
    Hi 
  </v:roundrect> 
  <v:roundrect style="display:block;width:50px;height:50px; top: 25px; left:25px;  position:absolute;" fillcolor="#c00"> 
    Hey 
  </v:roundrect>
</div>

answered Mar 21 '10 at 21:08

Andy E

338,112
86
474
445

That's a pity, I wanted to wrap them around divs, but the divs might be nested within one another. Anyway, thanks for the reply. – glen-84 Mar 22 '10 at 12:48
Source please ? – Cyril Duchon-Doris Feb 20 '18 at 14:47

Is it possible to nest one VML roundrect within another?

1 Answers1