Skip to content

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

Closed

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.

Activity

  1. bmacdonald commented on Aug 12, 2021

    @bmacdonald

    I've actually been experiencing the same issue with NativeScript 8 and Angular 11. It is really simple to reproduce. Create a GridLayout with a border radius of 5 and 3 borders set to one color and then one of another color.

    <GridLayout style="height:70;border-radius: 5;border-width: 1;border-color:green;border-top-color:red">
    
    </GridLayout>
    

    @13dante04 - have you found a work around for this by chance?

  2. janoshrubos commented on Sep 22, 2021

    @janoshrubos
    Contributor

    related to #6919

  3. NathanWalker commented on Oct 23, 2026

    @NathanWalker
    Contributor

    Fixed in #10374 (iOS view background rework), which also closed the related #6919. iOS now draws non-uniform border colors and widths with border-radius applied. Please open a new issue with a repro if a side-specific border still loses its radius on current versions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions