homepage Welcome to WebmasterWorld Guest from 67.202.56.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Rounded Corners - How to get radius to work on this?
How to get radius to work on a tabbed content area?
we5inelgr




msg:4597485
 8:09 pm on Jul 29, 2013 (gmt 0)

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:

.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:

<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?

 

DrDoc




msg:4597494
 8:49 pm on Jul 29, 2013 (gmt 0)

Are you using a full DOCTYPE? Which browser(s) are having issues?

lucy24




msg:4597501
 9:07 pm on Jul 29, 2013 (gmt 0)

I've tried various combinations of the -moz and -webkit radius properties

Why? Each vendor extension is specific to one group of browsers. -moz- only has meaning in Firefox (and related browsers like Camino). -webkit- only has meaning in Safari and Chrome. -o- (rare) only has meaning in Opera.

Using vendor prefixes may or may not help with backward compatibility, depending on the specific property involved. It rarely helps in MSIE, because the act of recognizing a vendor prefix means admitting that yours is not the only browser in the world.

Does your preferred browser support the radius property anywhere else? Something as simple as
div.roundbox {radius-stuff-here AND either a border or a background color so the radius will be visible}
paired with
<div class = "roundbox">

If you haven't already bookmarked caniuse dot com, do so. (Short version: MSIE < 9 simply won't do it, no matter what prefix you slap on. All other browsers should.)

we5inelgr




msg:4597502
 9:22 pm on Jul 29, 2013 (gmt 0)

Thanks for the reply.

I'm using FireFox 22.0 and I.E. 9.0.8112. Both are not showing the radius affect.

This is the DOCTYPE I'm using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


I have also tried using strict.dtd. Same thing though. Radius not being displayed.

DrDoc




msg:4597509
 9:52 pm on Jul 29, 2013 (gmt 0)

I do notice that you are not specifying the standard
border-radius. The -moz- and -webkit- vendor variations are meant for older browsers, while the property was still "experimental". Latest browser versions should all support the standard CSS3 properties.

Try the following:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
we5inelgr




msg:4597515
 10:17 pm on Jul 29, 2013 (gmt 0)

Bingo! That was it (adding border-radius: 20px;).

Your help is much appreciated. Many thanks.

[edited by: DrDoc at 10:26 pm (utc) on Jul 29, 2013]
[edit reason] Accidental smile face [/edit]

we5inelgr




msg:4597526
 10:59 pm on Jul 29, 2013 (gmt 0)

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?

DrDoc




msg:4597532
 11:26 pm on Jul 29, 2013 (gmt 0)

Are the tabs generated dynamically or are they fixed? If dynamically, you will need to target the last tab. If fixed, either targeting the "last" or giving it a class will work.

lucy24




msg:4597545
 12:10 am on Jul 30, 2013 (gmt 0)

There's an option B, though it may not work in your specific situation. Give the tabs themselves a transparent background, and combine them all in a div that carries the border-radius properties along with the desired background or border. This would apply purely to visuals; click or hover responses aren't affected.

Hoople




msg:4597561
 1:38 am on Jul 30, 2013 (gmt 0)

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).

JD_Toims




msg:4597568
 2:54 am on Jul 30, 2013 (gmt 0)

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.


<style type="text/css">
.rounded_corner_top_left { -webkit-border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; border-top-left-radius: 20px; }
.rounded_corner_top_right { -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; }
</style>

<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 rounded_corner_top_left">
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 rounded_corner_top_right">
Content 4
</div>
</div>

</div>

swa66




msg:4597600
 7:52 am on Jul 30, 2013 (gmt 0)

I'd not add classes named for what they make things look like. It's simply not sustainable in the long term.
(change the look of things and you have to change every html page ... )

I'd use :first-child and :last-child CSS3 selectors instead. Browsers (as always, IE<9 is the only one left in use) that cannot understand those pseudo classes cannot do rounded corners anyway.

JD_Toims




msg:4597832
 10:11 pm on Jul 30, 2013 (gmt 0)

(change the look of things and you have to change every html page ... )

I thought that's what TextWrangler and regular expressions were for? lol

Good point! Most people probably want to do it the way you suggested.

I haven't ever bothered to find another way, because what I've been doing works and I'm so used to bulk finding/replacing every occurrence on every page of a site if I have to I don't even think about it any more.

I am fairly certain IE 9 will do rounded corners though... There's plenty of posts around the 'net about it working and even some screen shots of them I found by searching around a bit.

we5inelgr




msg:4597835
 10:24 pm on Jul 30, 2013 (gmt 0)

Many thanks for the replies and suggestions. Much appreciated. Added the child class descriptions that differentiate the (static) tabs. Works now.

lucy24




msg:4597856
 11:27 pm on Jul 30, 2013 (gmt 0)

I am fairly certain IE 9 will do rounded corners though...

If it can't, caniuse is mistaken and should be notified :) (see earlier post)

JD_Toims




msg:4597882
 1:20 am on Jul 31, 2013 (gmt 0)

Opps! I misread swa66's post... It says <9... Sorry swa... Been an ugly day... So tired I haven't really been able to concentrate on coding, so I've just been fielding some questions and reading.

rainborick




msg:4597916
 4:17 am on Jul 31, 2013 (gmt 0)

BTW, there are a couple of .htc filters out there that add several CSS3 features to older versions of IE, including border-radius, box-shadow, (limited) gradients, rgba colors, etc. Everything gets handled from your primary stylesheet so it makes it easy to add to existing projects.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved