Rounded corners with linear-gradient.

No extra markup, just ::after pseudo-element.

by drawcard

HTML

<!-- from https://stackoverflow.com/a/29223812 -->

<div class="rounded-gradients toggle">
 Click me
</div>

SCSS

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
    font-family: Helvetica, sans-serif;
    color: #333;
}

.rounded-gradients {
    transition: all 0.5sec;
    position: relative;
    border: 4px solid transparent;
    border-radius: 100px;
    background: linear-gradient(#eee, #ddd);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 3px 10px rgba(255,255,255,0.2);
    &:after {
      position: absolute;
      top: -4px; bottom: -4px;
      left: -4px; right: -4px;
      background: linear-gradient(#ddd, #eee);
      content: '';
      z-index: -1;
      border-radius: 100px;
    }
    &:active {
      background: linear-gradient(orange, purple);
    }
}

.toggle {
  height: 48px;
  width: 48px;
}