Rounded VS Code Tabs

custom.css

.tabs-container {
  padding-left: 22px;
}

.tabs-container > .tab {
  transform: skewX(25deg);
  border-radius: 5px 5px 0 0;
  height: 28px;
}

.tabs-container > .tab + .tab {
  margin-left: 16px;
}

.tabs-container > .tab:before {
  content: "";
  position: absolute;
  left: -18px;
  top: -1px;
  transform: skewX(140deg);
  border-right: 0;
  margin: 0;
  padding: 0;
  width: 30px;
  border-radius: 5px 0 0 0;
  height: 28px;
  border-left-color: rgb(37, 37, 38);
  border-right-color: rgb(37, 37, 38);
  background-color: rgb(45, 45, 45);
}

.tabs-container > .tab:before {
  background-color: #161a1b;
}

.tabs-container > .tab.active:before {
  background-color: rgb(28, 32, 34);
}

.tabs-container > .tab.active {
  z-index: 1;
}

.tabs-container > .tab .tab-label,
.monaco-workbench
  > .part.editor
  > .content
  > .one-editor-silo
  > .container
  > .title
  .title-label {
  transform: skewX(-25deg);
  position: relative;
  left: -16px;
}

.tabs-container > .tab > .tab-close {
  transform: skewX(-25deg);
  position: relative;
  left: -4px;
}

.tabs-and-actions-container {
  height: 27px !important;
}

.tabs-container,
.tabs-container > .tab {
  height: 28px !important;
}

.tabs-container > .tab .tab-label a {
  font-size: 12px !important;
  position: relative;
  top: -1px;
}

Hi Dony. Thanks for posting this! I've tried adding this to Insiders VS Code on the Apple Mac. My Settings.json has the following lines in it:

"vscode_custom_css.imports": ["file:///Users/carlca/.vscode-insiders/custom.css"],

The custom.css file is just as you had it but with the additional line at the start:

canvas.decorationsOverviewRuler {
    display: none !important;
}

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container {
  padding-left: 22px;
}

etc, etc...

That additional line was part of previous changes I made to get rid off unwanted screen marks in Zen Mode.

My tabs remain resolutely sharp cornered. Any ideas? Thanks!

@carlca did you try running Reload Custom CSS and JS command from command palette (⌘cmd + shift + p) ?
I just tried it on Insiders and here's what I got

Sorry for the slow response. I've just tried your suggestion and it works! There's just a slight color issue concerning the tab icons, as shown in the attached image:

Otherwise it looks really good. Thanks!

I'm assuming it's the RGB settings in this part of the CSS:

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab:before {
  content: '';
  position: absolute;
  left: -18px;
  top: -1px;
  transform: skewX(140deg);
  border-right: 0;
  margin: 0;
  padding: 0;
  width: 30px;
  border-radius: 5px 0 0 0;
  height: 28px;
  border-left-color: rgb(37, 37, 38);
  border-right-color: rgb(37, 37, 38);
  background-color: rgb(22, 26, 27);
}

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active:before {
  background-color: rgb(28, 32, 34);
}

I might just have a play around myself, but any clues from your good self would be welcome as well, of course! Thanks!

Sorry, I just saw your replies @carlca. You gotta update the colour to your theme colours manually. The values used in the gist are particular to my theme.

Does this still work today?