Welcome to WebmasterWorld Guest from 54.163.115.193

Forum Moderators: not2easy

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

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

   
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?
8:49 pm on Jul 29, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Are you using a full DOCTYPE? Which browser(s) are having issues?
9:07 pm on Jul 29, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.)
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.
9:52 pm on Jul 29, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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?
11:26 pm on Jul 29, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
12:10 am on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
1:38 am on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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).
2:54 am on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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>
7:52 am on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
10:11 pm on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



(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.
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.
11:27 pm on Jul 30, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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)
1:20 am on Jul 31, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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.
4:17 am on Jul 31, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month