diff --git a/css/src/components/vertical-tabs.css b/css/src/components/vertical-tabs.css
index 4263e93..dd809c1 100644
--- a/css/src/components/vertical-tabs.css
+++ b/css/src/components/vertical-tabs.css
@@ -3,18 +3,18 @@
  * Override of misc/vertical-tabs.css.
  */
 
-/** Tab links. **/
+/* Tab links. */
 .vertical-tabs {
   position: relative;
-  overflow: hidden;
-  margin: 10px 0;
-  border-top: var(--border-tabs-trigger);
-  border-right: var(--border-tabs-trigger);
+  margin-top: 10px;
+  padding-bottom: 10px; /* apply padding for pane box shadow */
 }
 
+/* Tab menu. */
 .vertical-tabs__menu {
+  list-style: none;
   float: left; /* LTR */
-  width: 240px;
+  width: 320px;
   margin: 0 -100% -1px 0; /* LTR */
   padding: 0;
   line-height: 1;
@@ -23,89 +23,122 @@
   float: right;
   margin: 0 0 -1px -100%;
 }
+
+/* Tab menu item. */
 .vertical-tabs__menu-item {
   position: relative;
+  margin-bottom: -1px;
+}
+.vertical-tabs__menu-item:focus,
+.vertical-tabs__menu-item:active {
+  z-index: 2;
+}
+.vertical-tabs__menu-item.first {
+  margin-top: 0;
 }
 .vertical-tabs__menu-item.is-selected {
   z-index: 1;
-  overflow-x: hidden;
   width: 100%;
   box-shadow: var(--shadow-trigger-active-vertical-tab);
 }
-.vertical-tabs__menu-item.last {
-  border-bottom: none;
-}
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
-}
-.vertical-tabs__menu-item:focus,
-.vertical-tabs__menu-item:active {
-  z-index: 2;
-}
+
+/* Tab menu item anchor. */
 .vertical-tabs__menu-item a {
   display: block;
   padding: var(--space-s) var(--space-l);
   line-height: var(--line-height);
+  border-top: var(--border-tabs-trigger); 
   border-bottom: var(--border-tabs-trigger);
   text-decoration: none;
-  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
   color: var(--color-text);
+  margin-left: 1px; /* LTR */
 }
-.vertical-tabs__menu-item:last-child a {
-  border-bottom: 0;
-}
-.vertical-tabs__menu-item.is-selected a,
-.vertical-tabs__menu-item a:hover,
-.vertical-tabs__menu-item a:focus {
-  /*text-shadow: none;*/
-}
-.vertical-tabs__menu-item a:focus {
-  /*outline: none;*/
+[dir="rtl"] .vertical-tabs__menu-item a {
+  margin-left: 0;
+  margin-right: 1px;
 }
-.vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title {
-  /*text-decoration: underline;*/
+.vertical-tabs__menu-item.first a {
+  border-top: 1px solid transparent;
 }
-.vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
-.vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
-  /*text-decoration: none;*/
+.vertical-tabs__menu-item.last a {
+  border-bottom: 1px solid transparent;
 }
+
+/* Tab menu item selected. */
 .vertical-tabs__menu-item.is-selected a {
-  /*border-bottom: none;*/
-  border-left: 4px solid var(--color-input-border-focus);
   text-decoration: none;
   color: var(--color-absolutezero);
-  box-shadow: var(--shadow-details);
-  /** This overlay the border from the pane. **/
+  box-shadow: var(--shadow-tabs-base);
+  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
   background-color: white;
 }
 [dir=rtl] .vertical-tabs__menu-item.is-selected a {
-  padding-left: 15px;
-  padding-right: 11px;
+  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
 }
 .vertical-tabs__menu-item.is-selected a:hover,
 .vertical-tabs__menu-item.is-selected a:focus {
   color: var(--color-absolutezero-hover);
 }
+.vertical-tabs__menu-item.is-selected a::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0; /* LTR */
+  bottom: 0;
+  height: 100%;
+  border-left: 4px solid var(--color-input-border-focus); /* LTR */
+  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
+}
+[dir=rtl] .vertical-tabs__menu-item.is-selected a::before {
+  left: 0;
+  right: 0;
+  border-left: none;
+  border-right: 4px solid var(--color-input-border-focus);
+  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+}
+.vertical-tabs__menu-item.is-selected a::after {
+  content: '';
+  z-index: 100;
+  position: absolute;
+  top: 1px;
+  right: -5px; /* LTR */
+  bottom: 1px;
+  border-right: 10px solid var(--color-white); /* LTR */
+}
+[dir=rtl] .vertical-tabs__menu-item.is-selected a::after {
+  right: 0;
+  left: -5px;
+  border-right: none;
+  border-left: 10px solid var(--color-white);
+}
+.vertical-tabs__menu-item.is-selected.first a {
+  border-top: var(--border-tabs-trigger);
+}
+.vertical-tabs__menu-item.is-selected.last a {
+  border-bottom: var(--border-tabs-trigger);
+}
+
 .vertical-tabs__menu-item-summary {
   display: block;
   line-height: var(--line-height);
-  margin-top: var(--space-xs);
   font-size: var(--font-size-s);
   color: var(--color-davysgrey);
 }
 
-/** Tab panes. **/
+/* Tab panes. */
 [data-vertical-tabs-panes] {
 }
 .vertical-tabs__panes {
-  margin: 0 0 0 240px; /* LTR */
+  margin: 0 0 0 320px; /* LTR */
   padding: var(--space-l);
-  box-shadow: var(--shadow-details);
-  border-bottom: var(--border-tabs-trigger);
+  border: var(--border-tabs-trigger);
+  border-radius: 0 var(--base-border-radius) var(--base-border-radius) var(--base-border-radius); /* LTR */
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-tabs-base);
 }
 [dir="rtl"] .vertical-tabs__panes {
-  margin: 0 240px 0 0;
-  border-left: none;
-  border-right: 1px solid #a6a5a1;
+  margin: 0 320px 0 0;
+  border-radius: var(--base-border-radius) 0 var(--base-border-radius) var(--base-border-radius);
 }
 .vertical-tabs__panes:after {
   content: "";
@@ -116,7 +149,6 @@
   margin: 0;
   padding: 0;
   border: 0;
-  /*color: #595959;*/
   box-shadow: none;
 }
 .vertical-tabs__pane > summary {