Frame round corner problem

[zemian]

Hi, when enlarging the round corner of a frame, there is an issue where the bottom corners background is showing different colors. Is there way to fix this?

Below is a test case:

<div class="min-h-100p bg-gray-200">
   <section>
      <div class="content px-12 py-4">
         <div class="w-32">
            <div class="frame u-round-lg u-shadow-lg bg-purple-500">
               <div class="frame__body py-8"></div>
               <div class="frame__footer bg-white py-1 u-bg-opacity-80">
                  <div class="text-gray-700 text-sm"><b>purple-500</b></div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

[Spiderpig86]

Ack will take a look

[Spiderpig86]

You can use the u-overflow-hidden class hide the white background.

<div class="min-h-100p bg-gray-200">
   <section>
      <div class="content px-12 py-4">
         <div class="w-32">
            <div class="frame u-round-lg u-shadow-lg bg-purple-500 u-overflow-hidden">
               <div class="frame__body py-8"></div>
               <div class="frame__footer bg-white py-1 u-bg-opacity-80">
                  <div class="text-gray-700 text-sm"><b>purple-500</b></div>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

[zemian]

Ah, great solution! Thanks!

BTW, I want to point out that the docs on "colors" does not use the fix above, so it shows up on all the Extended colors pallet examples. (The round is small, so one would need to look closely to see it). So perhaps the doc should be fixed? Or even better is that the "Frame" should have this fix as default, since it has the rounded corner?

[Spiderpig86]

This has been resolved in commit 7fd9209 and will be shipped in 0.7.2