Nativescript: How to give the border shown in the image

[dhanalakshmitawwa]

[jjTudu]

<GridLayout columns="*,*" >
    <ContentView col="0" row="0">
        <Border borderRadius="0" borderWidth="1" borderColor="#FF0000">
              <Button text="Profile" tap="btnProfileClick"   width="100%" height="100%"/>
         </Border>
     </ContentView>
     <ContentView col="1" row="0">
         <Border borderRadius="0" borderWidth="1" borderColor="#FF0000">
             <Button text="Setting" tap="btnSettingClick"   width="100%" height="100%"/>
        </Border>`
    </ContentView>`
</GridLayout>

[NickIliev]

Hello @dhanalakshmitawwa

Border element is one option but keep in mind that this element depricated.

The better solutioin is to use CSS properties to apply border on your UI elements.
_For example:_

app.css

.bordered {
    border-width: 2; 
    border-color: #FF0000;
}

your-page.xml

<Page>
    <StackLayout class="bordered">
        <Label text="my label" />
    </StackLayout>
</Page>

Here is the article about styling with CSS and all the supported CSS properties in NativeScript
https://docs.nativescript.org/ui/styling

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.