Can we remove border from spread sheet tabs?

Can we remove border from spread sheet tabs?

Posted by: averma on 19 August 2026, 4:43 am EST

• 

  averma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 August 2026, 4:43 am EST - Updated 19 August 2026, 5:36 am EST

  function ensureSpreadJsChromeStyleTag(): void {
  
  if (document.getElementById(SPREADJS_CHROME_STYLE_TAG_ID)) return;

  const styleTag = document.createElement(‘style’);
  
  styleTag.id = SPREADJS_CHROME_STYLE_TAG_ID;
  
  styleTag.textContent = `
  
  .gc-tabStripBackground {
  
  background-color: var(–gc-tabstrip-bg) !important;
  
  background-image: none !important;
  
  }
  
  .gc-tabStripResizeBarInner {
  
  color: var(–gc-tabstrip-resize) !important;
  
  }
  
  .gc-tabStripNewTab-normal,
  
  .gc-tabStripNewTab-hover,
  
  .gc-tabStripNewTab-highlight {
  
  border-color: var(–gc-tabstrip-newtab-icon) !important;
  
  background-color: var(–gc-tabstrip-newtab-bg) !important;
  
  background-image: none !important;
  
  }

  /* Sheet tab states */
  .gc-tab-normal {
    background-color: var(--gc-tab-bg) !important;
    background-image: none !important;
    color: var(--gc-tab-fg) !important;
    border-bottom: 2px solid transparent !important;
  }
  .gc-tab-hover {
    background-color: var(--gc-tab-hover-bg) !important;
    background-image: none !important;
    color: var(--gc-tab-hover-fg) !important;
    border-bottom: 2px solid transparent !important;
  }
  .gc-tab-selected,
  .gc-tab-activeNotSelected {
    background-color: var(--gc-tab-active-bg) !important;
    background-image: none !important;
    color: var(--gc-tab-active-fg) !important;
    border-bottom: 2px solid transparent !important;
  }
  .gc-tab-active {
    background-color: var(--gc-tab-active-bg) !important;
     background-image: none !important;
     color: var(--gc-tab-active-fg) !important;
     border-bottom: 2px solid #5F2BFF !important;
     border-top: 2px solid #5F2BFF !important;
   }
  
  .gc-corner-normal {
    background-color: var(--gc-corner-bg) !important;
  }
  .gc-corner-hover {
    background-color: var(--gc-corner-hover-bg) !important;
  }
  .gc-corner-selected {
    background-color: var(--gc-corner-selected-bg) !important;
  }
  .gc-corner-triangle-normal,
  .gc-corner-triangle-hover,
  .gc-corner-triangle-selected {
    color: var(--gc-corner-triangle) !important;
  }
  
  .gc-horizontal-scrollbar,
  .gc-vertical-scrollbar {
    background-color: var(--gc-scrollbar-bg) !important;
  }
  
  .gc-footer-corner {
    background-color: var(--gc-scrollbar-corner-bg) !important;
  }
  

  `;
  
  document.head.appendChild(styleTag);
  
  }

  can we remove border-bottom and add border-top ? i’M USING THIS but border-top not getting applied.
  
  Below is the expected result, i’m looking to get.
  
  

  

  1728×172 12.5 KB

• 

  averma

  • Post Options:
  • Link
    Copy

  Posted 19 August 2026, 6:34 am EST - Updated 19 August 2026, 6:39 am EST

  also their is a white padding in the active sheet tab , can we remove that as well ?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 19 August 2026, 8:41 am EST

  Hi,

  We are still investigating the issue at our end. We will let you know about our findings as soon as possible.

  Regards,

  Priyam

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2026, 7:19 am EST

  Hi Ashish,

  Apologies for the delay caused.

  We can replicate both reported behaviors. We are currently discussing this matter with the concerned development team and will update you as soon as we have any input from their end.

  Internal Trakcing ID(s):

  1. Top border: SJS-35704
  2. Unwanted white lines: SJS-35705

  We appreciate your patience & understanding in the meantime.

  Thanks & Regards,
  
  Chirag

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 August 2026, 12:53 am EST

  Hi Ashish,

  Thank you for your patience while we discussed this matter with our development team.

  Regarding the top border, the top border appearance is supported when the sheet tab strip is positioned above the spreadsheet grid. However, customizing the borders on both sides of the sheet tabs is not currently supported. Please refer to Tab Strip | Top for more information.

  Regarding the white lines/padding around the active sheet tab, this is part of the current sheet-tab rendering behavior. SpreadJS follows a rendering approach similar to Excel, where the tab background is rendered with an inward-padded area. There is currently no corresponding CSS property or supported API to customize or remove this area.

  Please let us know if you require any further assistance.

  Thanks & Regards,
  
  Chirag