title: Safari css shows oval and not line for tab
body: <p>I have noticed a little issue with my css in safari. If you compare the top picture and the bottom picture, the top picture displaying a line under the tab titles is perfect and works in all browsers except safari.</p>
  
  <p>When you see the bottom picture which is safari, looks like strange oval shape. How can I get it to look like the top picture?</p>
  
  <p><a href="https://i.stack.imgur.com/qN3P0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qN3P0.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ebHtA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ebHtA.png" alt="enter image description here"></a></p>
  
  <pre><code>   &lt;div class="mandem"&gt;
          &lt;div class="tabs"&gt;
              &lt;div class="tab-2"&gt;
                  &lt;label for="tab2-1"&gt;Description&lt;/label&gt;
                  &lt;input id="tab2-1" name="tabs-two" type="radio" checked="checked"&gt;
                  &lt;div&gt;
  
      ...
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tab-2"&gt;
                  &lt;label for="tab2-2"&gt;Lesson&lt;/label&gt;
                  &lt;input id="tab2-2" name="tabs-two" type="radio"&gt;
                  &lt;div&gt;
  
      ...
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  .tabs ul {
  
      color: white;
      list-style-position: inside; 
      font-size: medium; 
  }
  
  
  .mandem {
    background: #191828;
    color: #efedef;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.6em;
    margin: 0;
    padding: 100px; }
  
  
  button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: none; }
  
  .tabs {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden; 
  }
  
  
    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
      color: #efedef;
      cursor: pointer;
      display: block;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1em;
      padding: 0rem 0;
      text-align: center; }
  
  
    .tabs [class^="tab"] [type="radio"],
    .tabs [class*=" tab"] [type="radio"] {
      border-bottom: 1px solid rgba(239, 237, 239, 0.5);
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
      .tabs [class*=" tab"] [type="radio"]:hover,
      .tabs [class*=" tab"] [type="radio"]:focus {
        border-bottom: 1px solid white; }
      .tabs [class^="tab"] [type="radio"]:checked,
      .tabs [class*=" tab"] [type="radio"]:checked {
        border-bottom: 2px solid white; }
      .tabs [class^="tab"] [type="radio"]:checked + div,
      .tabs [class*=" tab"] [type="radio"]:checked + div {
        opacity: 1; }
      .tabs [class^="tab"] [type="radio"] + div,
      .tabs [class*=" tab"] [type="radio"] + div {
        display: block;
        opacity: 0;
        padding: 2rem 0;
        width: 90%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
  
  .tabs .tab-2 {
      width: 50%; }
      .tabs .tab-2 [type="radio"] + div {
        width: 200%;
        margin-left: 200%; }
      .tabs .tab-2 [type="radio"]:checked + div {
        margin-left: 0; }
      .tabs .tab-2:last-child [type="radio"] + div {
        margin-left: 100%; }
      .tabs .tab-2:last-child [type="radio"]:checked + div {
        margin-left: -100%; }
  </code></pre>