From 41411bddcb7fe84df293fb22032cc720c25eae22 Mon Sep 17 00:00:00 2001
From: Yedoti Sumanth <sumanthyedoti@redd.in>
Date: Tue, 3 Nov 2020 09:17:27 +0530
Subject: [PATCH] fix(Widget): add rounded corners to Tabs Widget

---
 .../components/designSystems/appsmith/TabsComponent.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
index 3a8dc4c5fd..5e9a0e4c88 100644
--- a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -42,6 +42,9 @@ const ChildrenWrapper = styled.div`
   border-top: none;
   border-color: ${props => props.theme.colors.bodyBG};
   background: ${props => props.theme.colors.builderBodyBG};
+  border-bottom-right-radius: ${props => `${props.theme.radii[1]}px`};
+  border-bottom-left-radius: ${props => `${props.theme.radii[1]}px`};
+  overflow: hidden;
 `;
 
 const ScrollableCanvasWrapper = styled.div<
@@ -61,6 +64,10 @@ const TabsContainer = styled.div`
   overflow-y: hidden;
   ${scrollbarLight};
   background: ${props => props.theme.colors.builderBodyBG};
+  border-top-right-radius: ${props => `${props.theme.radii[1]}px`};
+  border-top-left-radius: ${props => `${props.theme.radii[1]}px`};
+  border: 1px solid red;
+  overflow: hidden;
   && {
     height: 38px;
     width: 100%;
@@ -130,7 +137,7 @@ const TabsComponent = (props: TabsComponentProps) => {
                 {tab.label}
               </StyledText>
             ))}
-          <StyledTab></StyledTab>
+          <StyledTab />
         </TabsContainer>
       ) : (
         undefined