How do i make these borders?

HTML & CSS
1

the thin style ones that u can see separating the menu items. I guess its done with box shadow?

2

They do it with a combination of border-right and box-shadow:

border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);

But you could also do it with a right and left border:

#page-menu-wrapper ul li .top-menu {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

… although, you’d have a problem with the left and right menu items doing it this way, so normally you’d but one of those borders on the inner element.

Anyhow, the box-shadow option is easier, but won’t work in older browsers.

3

thx again dude! But one more thing, if I want to have the border one the left side aswell on the first menu item, how would u do that? obv i have to add a border-left property but would i do with the shadow?

4

What I should have suggested is something like this:

#page-menu-wrapper ul li {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#page-menu-wrapper ul li .top-menu {
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

Then, to add the extra black border to the left and white border to the right, you could add this on the UL itself:

#page-menu-wrapper ul.main {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.11);
}
5