Skip to content

Nativescript Angular, iOS, border-left-color negates border-radius #9249

@13dante04

Description

@13dante04

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 7.2.1
  • Cross-platform modules: -
  • Android Runtime: 7.0.1
  • iOS Runtime: 7.2.0
  • XCode Version: 12.4
  • Nativescript Angular: 11.0.1

Describe the bug
When using border-right-color or any border-side-color on a Button, border radius gets ignored and rest to 0, on IOS only, on Android it works like intended

Example project
https://github.com/13dante04/nativescript-buttons-sample

To Reproduce
Have a button with a css class .btn

<GridLayout>
	<ScrollView>
		<StackLayout class="home-panel">
			<Button text="btn" class="btn"></Button>
		</StackLayout>
	</ScrollView>
</GridLayout>

apply a style with border-side-color and border-style: solid and border-width: 1

.btn {
                border-left-color: red;
                border-left-width: 1;
                border-left-style: solid;
                border-radius: 30;
}

iOS result (bug)

**Android result (expected) **
EDIT: not quite sure about the border not bending to it's radius but I'm addressing that issue here.

Expected behavior
Have a button with rounded edges but only one side with a border radius (particular use case when only applying border radius to one side, but the bug happens when generally applying border radius)

Additional context
Didn't test out other layouts, I'm kind of low on time, managed to get myself a workaround but just putting it out here in case someone else stumbles upon the issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions