#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Question Rounded Corners - How to get radius to work on this?


    Hi all,

    I've got tabbed content as seen below. I'm trying to get the corners to be rounded, but can't seem to get radius to work. I've tried various combinations of the -moz and -webkit radius properties in various combinations of the classes. None are making the corners rounded (especially the current set up with the definitions everywhere).

    The CSS:
    Code:
    .tabs {  position: relative; min-height: 175px; clear: both; margin-right: 10px; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    .tab { float: left; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    .tab label { background: #7D9EC0;  padding-top: 5px; padding-left: 5px; padding-right: 5px; padding-bottom: 6px;  border: 1px solid #ccc;  margin-left: -1px;  position: relative; left: 1px;  font-family: Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #000000; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    .tab [type=radio] { display: none;  -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    .contentTab { position: absolute; top: 20px; left: 0; background: white; right: 0; bottom: 0; padding: 2px; border: 1px solid #7D9EC0; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    [type=radio]:checked ~ label { background: black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #FFFFFF; border-bottom: 1px solid white; z-index: 2; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    
    [type=radio]:checked ~ label ~ .contentTab { z-index: 1; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
    The HTML:
    Code:
    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab 1</label>
           
           <div class="contentTab">
    	       Content 1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab 2</label>
           
           <div class="contentTab">
           	   Content 2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab 3</label>
         
           <div class="contentTab">
               Content 3
           </div> 
       </div>
       
        <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1">
           <label for="tab-4">Tab 4</label>
         
           <div class="contentTab">
               Content 4
           </div> 
       </div>
        
    </div>
    What am I doing wrong, in order to get the corners rounded? Perhaps the issue is that this is a radio "button" tabbed content, and that can't take the radius properties?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Good evening,

    Add this to your CSS:
    Code:
    label
    {
         border-radius: 10px;
         -moz-border-radius: 10px;
    }
    Kind regards,

    NM.

    Comments on this post

    • we5inelgr agrees : Suggested fix was the answer. Thanks!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Originally Posted by Nanomech
    Good evening,

    Add this to your CSS:
    Code:
    label
    {
         border-radius: 10px;
         -moz-border-radius: 10px;
    }
    Kind regards,

    NM.
    Hi, and thanks for the reply and suggestion. Adding border-radius makes it work now.

    Your help is much appreciated. Thanks again!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Sorry, one other question please.

    If I want the upper left of tab 1 (only) and the upper right of tab 4 (only) to have the radius, how could I do that?

    For example, if I add border-top-right-radius: 10px; to the ".contentTab" class, the top right of each of the tabs has the radius.

    How can I isolate just tab 4 to have that property?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Added the child class descriptions that differentiate the (static) tabs). Works now.

IMN logo majestic logo threadwatch logo seochat tools logo