Welcome to WebmasterWorld Guest from 54.83.93.85

Forum Moderators: not2easy

Message Too Old, No Replies

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)

New User

5+ Year Member

joined:Mar 15, 2013
posts:26
votes: 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 July 29, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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

Senior Member from US 

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

joined:Apr 9, 2011
posts:15376
votes: 725


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 July 29, 2013 (gmt 0)

New User

5+ Year Member

joined:Mar 15, 2013
posts:26
votes: 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 July 29, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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;
10:17 pm on July 29, 2013 (gmt 0)

New User

5+ Year Member

joined:Mar 15, 2013
posts:26
votes: 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 July 29, 2013 (gmt 0)

New User

5+ Year Member

joined:Mar 15, 2013
posts:26
votes: 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 July 29, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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.
12:10 am on July 30, 2013 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:15376
votes: 725


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 July 30, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:767
votes: 11


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 July 30, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 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>
7:52 am on July 30, 2013 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 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.
10:11 pm on July 30, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 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.
10:24 pm on July 30, 2013 (gmt 0)

New User

5+ Year Member

joined:Mar 15, 2013
posts:26
votes: 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 July 30, 2013 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:15376
votes: 725


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 July 31, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 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.
4:17 am on July 31, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:951
votes: 30


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members