How to add border on gridlayout

Question

I'm trying to add borders to this nativescript GridLayout usig the gridStyle

<GridLayout columns="200, 150" rows="15, 20" class="gridStyle">
  <label text="Patient Name" class="rowLabelStyle" row="0" col="0"/>
  <label text="{{ fullName }}" class="rowDataStyle" row="1" col="0"/>
  <label text="DOB" class="rowLabelStyle" row="0" col="1"/>
  <label text="{{ data.subDateOfBirth }}" class="rowDataStyle" row="1" col="1"/>
</GridLayout>

and here is the relevant css

.gridStyle {
    background-color: cadetblue;
    border: solid 1px darkgray ;
}

I have look in many places, tutorial, the official documentation without much luck, the table will not show any orders are all

Answer 1

In NativeScript supported CSS properties are border-width, border-color and border-radius. border tag alone would not work.

HTML

<GridLayout columns="200, 150" rows="15, 20" class="gridStyle">
  <label text="Patient Name" class="rowLabelStyle" row="0" col="0"/>
  <label text="{{ fullName }}" class="rowDataStyle" row="1" col="0"/>
  <label text="DOB" class="rowLabelStyle" row="0" col="1"/>
  <label text="{{ data.subDateOfBirth }}" class="rowDataStyle" row="1" col="1"/>
</GridLayout>

CSS

.gridStyle {
  border-color: cadetblue;
  border-width: 1px;
}

More info: https://docs.nativescript.org/ui/styling