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

How to get radius to work on a tabbed content area?

[we5inelgr]

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]

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

[lucy24]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

(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]

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

[lucy24]

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]

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]

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.