Menu icon Foundation
How do I add a radius to tabs??

Can someone explain?

I have used any mixins yet. I have only been editing the settings file and making my own css . If this requires a mixin I need a little further explanation.

I have a couple tabs set up from the foundation docs but I want the tabs and the corners of the content to be rounded.

tabs radius

Can someone explain?

I have used any mixins yet. I have only been editing the settings file and making my own css . If this requires a mixin I need a little further explanation.

I have a couple tabs set up from the foundation docs but I want the tabs and the corners of the content to be rounded.

Smartpixels over 5 years ago

No need to edit default files if you are okay with using utility classes

http://foundation.zurb.com/docs/utility-classes.html

You can simply insert the

<ul class="button-group round radius tabs" data-tab="">
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>

Now to get the content rounded you can use Compass mixins or create your own for border-radius

here is the code if you are using compass
http://compass-style.org/reference/compass/css3/border_radius/

.content-radius {
@include border-radius(5px);
}

annearchy over 5 years ago

Your answer worked but now the tabs are too rounded, even if I make the radius 1px. Here is a pic of what I am trying to achieve -

http://s30.postimg.org/n1u1we5u9/panel.jpg

I read on css tricks to just make an image and use that as a bg but isn't there a way to achieve this with css/scss and wouldn't it be more responsive?

annearchy over 5 years ago

I think I found an answer that works for now -- My problem was figuring out the .tabs a part.

Thanks Smartpixels!

.tabs a{
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

Karl Ward over 5 years ago

You don't need to use prefixes any more for border-radius, and you should use shorthand:

border-radius: 4px 4px 0 0;

annearchy over 5 years ago

Ah much simpler Karl. Sorry I am a NOOB!

Henry Weston over 1 year ago

I trust that the majority of your questions were cleared here. Two or three codes that have been given here is exceptionally compelling and it would truly do the capacity that you have been searching for. At any rate, much obliged for getting some information about it. Essay Writing Company

jessica brown 16 days ago

You can add a radius to tabs by using the following coding

 

Regards

Essay Writing Services

 

<ul class="button-group round radius tabs" data-tab="">
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>