Creating tabs without rectangles

Question

Creating tabs without rectangles

Navigation

#1 by (1 votes)

0

I need a little help. I have these tabs that are working, but visually I do not like the rectangles where I click and want to change.

Original: link

I want to remove the tabs:

Andputsomethinglikethis:

I've tried several ways but I can not replace those tabs.

html css

asked by anonymous 15.04.2015 / 11:45

1 answer

ActionBar does not display Icon VB.NET with acces database

score 1 · Answer 1

You can resolve this by using the border-radius property. Since only the borders on the element are needed, you use the specific properties for each side ( border-radius is simply a shortened version of the 4 for each side.)

.tab {
    width:70px;
    height:30px;
    border:1px #ccc solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display:inline-block;
}

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>

I gave an update to your JSFiddle code: link . Note that I took some unnecessary things, like the leading edge on ul.tabs .

To learn more about the property: link