<div class="button-group">
  <button>My Account</button><button>Settings</button>
button {
  background: linear-gradient(#fafafa, #eee);
  border: 1px solid #b6bfb6;
  font-size: 1.5em;
  padding: 0.2em 0.5em;
  cursor: pointer;
  &:hover {
    border-color: #4fb0ff;
    // This is the magic that makes each one stack
    // so we can see all four borders on hover
    position: relative;
    z-index: 1;

.button-group {
  display: inline-block;
  button:not(:first-child) {
    margin-left: -1px;
  button:first-child {
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
  button:last-child {
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.