how to give border and border-radius to stacklayout in nativescript

Question

I'm new to nativescript.I don't know how to give border and border-radius to stacklayout.

Below I have posted what I tried so far:

component.html:

 <StackLayout class ="stackBorder" orientation="horizontal">
    <Label text="Label 1" width="50" height="50" > </Label>
    <Label text="Label 2" width="50" height="50" > </Label>
    <Label text="Label 3" width="50" height="50" backgroundColor="white"> </Label>
    <Label text="Label 4" width="50" height="50" backgroundColor="white"> </Label>
  </StackLayout>

component.css:

StackLayout {
  margin: 10;
  background-color: green;

}

.stackBorder {
 border: 2px solid red;
   border-radius: 8px;
}

component.ts:

@Component({
    selector: "sdk-child-component",
    moduleId: module.id,
    templateUrl: "./component.html",
    styleUrls: ["./component.css"]
})

Finally I'm unable to see the border in stacklayout.

Artem Belik · Answer 1 · 2022-12-14T09:56:02.937

9

Via html:

<StackLayout borderRadius="30" borderColor="red" borderWidth="3"></StackLayout>

Via css:

StackLayout {
  border-color: red;
  border-width: 3;
  border-radius: 30;
}

More details: https://docs.nativescript.org/ui-and-styling.html#supported-css-properties

edited Dec 14 '22 at 09:56

answered Feb 26 '19 at 09:43

Artem Belik

472
4
7

score 7 · Accepted Answer · answered May 25 '17 at 13:17

7

In nativescript supported css properties are border-width, border-color and border-radius. Tag border alone is not possible nor any solid selection.

More info:

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

answered May 25 '17 at 13:17

mico

12,730
12
59
99

score 1 · Answer 3 · answered Mar 15 '18 at 05:12

1

I guess you can use per-side borders. Check this https://www.nativescript.org/blog/per-side-borders-in-nativescript-css

answered Mar 15 '18 at 05:12

Xsmael

3,624
7
44
60

how to give border and border-radius to stacklayout in nativescript

3 Answers3