title: Sencha Touch 2 rounded panels : CSS newb
body: <p>I'm really green regarding CSS. As a matter of fact, I didn't really understand the concepts, even after reading like 3 books. What I'm trying to achieve here is create some rounded corner panels with Sencha Touch 2.0.1. I have a Ext.Panel. I give it a class name of "PanelBio" like this : </p>
  
  <pre><code>Ext.create('Ext.Panel', {
      id: 'panelBio02',
      styleHtmlContent: true,
      centered:true,
      cls: 'PanelBio',
  
      html: [
          '&lt;h1&gt;Lorem epsum.....&lt;/h1&gt;'
      ].join("")
  })
  </code></pre>
  
  <p>So far so good... Then, I had a class definition in SASS file :</p>
  
  <pre><code>.PanelBio {
      -webkit-border-radius: 3em !important;
      border-radius: 3em !important;
      background-color: #333333;
      opacity: 0.8;
  }
  </code></pre>
  
  <p>Yet, when I run the code, it's just not working. It is embedded in a couple of layers. First a panel with a Carousel, then an item is a panel that contains this panel. So, when I inspect the element in Chrome dev tools, I get something like this :</p>
  
  <pre><code>&lt;div class="x-container x-panel PanelBio x-floating" id="panelBio02" style="z-index: 4 !important; "&gt;        
      &lt;div class="x-inner x-panel-inner" id="ext-element-10"&gt;
          &lt;div class="x-innerhtml  x-html" id="ext-element-12"&gt;
              &lt;h1&gt;Lorem epsum.....&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="x-anchor" style="display: none; " id="ext-element-11"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone explain me how could I do to make this work ?</p>