How to set Border to TabSheet in Vaadin-24


public TabSheetExample() {

	TabSheet mMainTabSheet = new TabSheet();
	mMainTabSheet.add("EQUITY", new Div(new Text("This is the Equity tab content")));
	mMainTabSheet.add("FUND", new Div(new Text("This is the Fund tab content")));
	mMainTabSheet.add("CASH", new Div(new Text("This is the Cash tab content")));
	mMainTabSheet.add("FIXED INCOME", new Div(new Text("This is the FI tab content")));
	mMainTabSheet.add("ALT INV", new Div(new Text("This is the Alt Inv tab content")));
	mMainTabSheet.add("DERIVATIVE", new Div(new Text("This is the Derivative tab content")));

Here is my code I going to set Border to each tab but I am not getting result plz anyone can suggest me ?

Hello. In order to access each tab you need to use the vaadin-tab selector in your css file. If you add the following rule to your global stylesheet (frontend/themes/your-theme-name/styles.css) you can add a border to each tab:

.your-tabsheet-class-name vaadin-tab  {
    border: 1px solid black;

You can also add a border to the tabsheet component with the help of variants like shown here Tabs | Components | Vaadin Docs

You can find the list of all the useful css selector for tabs here Styling | Tabs | Components | Vaadin Docs


1 Like

You can use the utility classes for adding a border to TabSheet.