Regarding spacing on tabs and making them similar to buttons

Question

I was checking out some apps on how they handle tabs and the spacing between them. Myfitnesspal has three tabs right next to each other with the right and left side having rounded corners. The app I am designing is similar except I use space between the three tabs. Do you think one is better than the other or are both fine? Also I know this is more about the visual but I was wondering if the rounded corners on the right and left of a tab ( how I show in the image below ) is a bad idea and might confuse users? Tabs and buttons can both be round correct? So it should be fine?

Answer 1

Tabs are usually used to divide a large content into sections and then alternate its views within the same context. Nielsen Norman Group has a very good article on its proper usage. They are usually placed next to each other (without spacing) to form a single component. The reason for this UI pattern is to let user know that the information the individual tab points to have some connection with each another. Whether to round both ends is purely cosmetic.

Assuming the 3 buttons are supposed to function like tabs, then there is a slight chance you might confuse user with the way you design it. They look more like buttons to me at a glance. Hmm.. I see an active state on the first button. If you want to toggle between states, I reckon you style it to look more like tabs instead (remove the spacing).