React-native: BorderColor and borderWidth are missing when using borderRadius

[Patys]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.6.0
Yarn: Not Found
npm: 5.3.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Steps to Reproduce

Minimal example:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.withBottomBorder]}>
          <Text>Only bottom border with color</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius]}>
          <Text>Only bottom border with radius</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius, styles.withBottomBorder]}>
          <Text>Bottom border with radius and color, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
        <View style={[styles.view, styles.withBottomBorder, styles.withBorderRadius]} >
          <Text>Bottom border with color and radius, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  view: {
    width: 200,
    height: 100,
    backgroundColor: '#ffa',
    margin: 10,
    padding: 10
  },
  withBorderRadius: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5
    /* the same is ofr the borderBottomRight/Left */
  },
  withBottomBorder: {
    borderBottomColor: '#0f0',
    borderBottomWidth: 1,
    backgroundColor: '#faa'
  }
});

Expected Behavior

Last two should look like first one, but with border radius at the top.

Actual Behavior

Border is missing when using borderRadius

Reproducible Demo

Look minimal example above with screens.

[dogbutcat]

With example you given, it seems no problem on expo, change a physic phone to have a try, maybe resolution problem.

[Patys]

I used also real device. Xiaomi redmi 4x in dev mode.
Problem exists.

[porluz]

looks related to https://github.com/facebook/react-native/issues/8236, https://github.com/facebook/react-native/issues/9759, https://github.com/facebook/react-native/issues/11042

[yexiaosong]

same problem

[lucasbento]

Reproducible on emulator Nexus 5X API 26 as well.

[fufuninja]

+1 here. Using BorderTop instead as temporary replacement.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[salmanwaheed]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain salmanwaheed.info has exceeded the max emails per hour (154/150 (102%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from o11.sgmail.github.com ([167.89.101.202]:40652)
by box1177.bluehost.com with esmtps (TLSv1.2:ECDHE-RSA-AES128-GCM-SHA256:128)
(Exim 4.89_1)
(envelope-from )
id 1epQUl-003IlO-QG
for [email protected]; Fri, 23 Feb 2018 20:27:32 -0700
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed/relaxed; d=github.com;
h=from:reply-to:to:cc:in-reply-to:references:subject:mime-version:content-type:content-transfer-encoding:list-id:list-archive:list-post:list-unsubscribe;
s=s20150108; bh=eQqMxxZek4AhtERQYaUzzgHTQnk=; b=s6z+kQo2KNcgQEQt
FqR0/EBGOv4ZrCGdwK7MZSfYBzCzVGoQ/gCCtRstoBEUbPLUK7VRTcGUip+m9Ryx
7Uh0eHR9UT8AOKytmuwQNgoBWgrKsPJaImVGidjXUo5tXNE1SIr9+eDq8Qw84oiT
itTX73ve20eAWbcVlKGiDgvHBuc=
Received: by filter0232p1las1.sendgrid.net with SMTP id filter0232p1las1-14318-5A90DB98-10
2018-02-24 03:27:20.391999402 +0000 UTC
Received: from github-smtp2a-ext-cp1-prd.iad.github.net (github-smtp2a-ext-cp1-prd.iad.github.net [192.30.253.16])
by ismtpd0005p1iad1.sendgrid.net (SG) with ESMTP id nu5SWzfnSJ-o8YEfTw10WQ
for [e-mail]; Sat, 24 Feb 2018 03:27:20.317 +0000 (UTC)
Date: Sat, 24 Feb 2018 03:27:20 +0000 (UTC)
From: React Native Bot [e-mail]
Reply-To: facebook/react-native [e-mail]
To: facebook/react-native [e-mail]
Cc: Subscribed [e-mail]
Message-ID:
In-Reply-To:
References:
Subject: Re: [facebook/react-native] BorderColor and borderWidth are missing
when using borderRadius (#17432)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5a90da8b67694_376a2b0b3acf6ec4438870";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: react-native-bot
X-GitHub-Recipient: salmanwaheed
X-GitHub-Reason: subscribed
List-ID: facebook/react-native
List-Archive: https://github.com/facebook/react-native
List-Post: [e-mail]
List-Unsubscribe: ,
https://github.com/notifications/unsubscribe/AO8bOMlfVgUdVk1ZNsWoaL8H31rFWE2zks5tX4CLgaJpZM4RR1yb
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-SG-EID: 92ws1MVnlto3blxqXlf5goB0ee0kdDGWR6vcWx8d6486X3OqH0soUfMtMPWhKmUgAfYnWyxcZ3CueC
cuiUVu3zwhl3w7ClWjNf7robtU3VPS9glQg6GHJnr1juJZXtTiiNcCMnMoNg9KTaWyWhBSxkpqinuL
OxOsT5pxF0Rd6nSoV5yJWSJrkXJOFQQGSKlFxJjumlzgIT4x+2dah2wk3fHJpF1xhzDCsdWBHbhCNW
0=
X-Spam-Status: No, score=0.8
X-Spam-Score: 8
X-Spam-Bar: /
X-Ham-Report: Spam detection software, running on the system "box1177.bluehost.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root@localhost for details.

Content preview: Closed #17432. -- You are receiving this because you are subscribed
to this thread. Reply to this email directly or view it on GitHub: https://github.com/facebook/react-native/issues/17432#event-1490267693
[...]

Content analysis details: (0.8 points, 5.0 required)

pts rule name description

---

0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked.
See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block
for more information.
[URIs: github.com]
-0.5 SPF_PASS SPF: sender matches SPF record
-0.0 T_RP_MATCHES_RCVD Envelope sender domain matches handover relay
domain
1.3 HTML_IMAGE_ONLY_24 BODY: HTML: images with 2000-2400 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
2.5 DCC_CHECK No description available.
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-2.3 AWL AWL: Adjusted score from AWL reputation of From: address
X-Spam-Flag: NO

----==_mimepart_5a90da8b67694_376a2b0b3acf6ec4438870
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #17432.

--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/facebook/react-native/issues/17432#event-1490267693
----==_mimepart_5a90da8b67694_376a2b0b3acf6ec4438870
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #17432.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

----==_mimepart_5a90da8b67694_376a2b0b3acf6ec4438870--

[salmanwaheed]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain salmanwaheed.info has exceeded the max emails per hour (176/150 (117%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext2.iad.github.net ([192.30.252.193]:33152 helo=github-smtp2b-ext-cp1-prd.iad.github.net)
by box1177.bluehost.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.89_1)
(envelope-from [e-mail])
id 1epQVj-003Ja8-Dr
for [email protected]; Fri, 23 Feb 2018 20:28:31 -0700
Date: Fri, 23 Feb 2018 19:22:49 -0800
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1519442897;
bh=Pd7sChCeY6SVGA6aqphNgfBsQJ6isizAHda/3ylIPd8=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=KiJ+GzpPgQWncDCkqUmsElnLZ6C7ecOE2Buk790yVXghXNqgD92+KE+6Ct/Z7EAfA
4CX8APmjZDty42IvzM5OqwE51/61U4tJo/3pqNPThfBq5NO8++0m4SC3Y186ULUNu2
TzquR602NCVmTzfF1rUqWCN/cOp9npolmdNY4v8U=
From: React Native Bot [e-mail]
Reply-To: facebook/react-native [e-mail]
To: facebook/react-native [e-mail]
Cc: Subscribed [e-mail]
Message-ID:
In-Reply-To:
References:
Subject: Re: [facebook/react-native] BorderColor and borderWidth are missing
when using borderRadius (#17432)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5a90da892a246_76d3fcb7c190f28262531";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: react-native-bot
X-GitHub-Recipient: salmanwaheed
X-GitHub-Reason: subscribed
List-ID: facebook/react-native
List-Archive: https://github.com/facebook/react-native
List-Post: [e-mail]
List-Unsubscribe: ,
https://github.com/notifications/unsubscribe/AO8bOLcEoPmvzQfE43-zrHn4593qZsBMks5tX4CJgaJpZM4RR1yb
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-Spam-Status: No, score=-1.0
X-Spam-Score: -9
X-Spam-Bar: -
X-Ham-Report: Spam detection software, running on the system "box1177.bluehost.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root\@localhost for details.

Content preview: Thanks for posting this! It looks like you may not be using
the latest version of React Native, v0.53.0, released on January 2018. Can
you make sure this issue can still be reproduced in the latest version? [...]

Content analysis details: (-1.0 points, 5.0 required)

pts rule name description

---

0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked.
See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block
for more information.
[URIs: github.io]
-0.5 SPF_PASS SPF: sender matches SPF record
0.0 HTML_IMAGE_ONLY_32 BODY: HTML: images with 2800-3200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.4 AWL AWL: Adjusted score from AWL reputation of From: address
X-Spam-Flag: NO

----==_mimepart_5a90da892a246_76d3fcb7c190f28262531
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest ve=
rsion of React Native, v0.53.0, released on January 2018. Can you make su=
re this issue can still be reproduced in the latest version? =

I am going to close this, but please feel free to open a new issue if you=
are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute =E2=80=A2 What to Expect from Maintainers ub>}

-- =

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/facebook/react-native/issues/17432#issuecomment-368194=
946=

----==_mimepart_5a90da892a246_76d3fcb7c190f28262531
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest= version of React Native, v0.53.0, released on January 2018. Can you make= sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if = you are able to confirm that this is still a problem in v0.53.0 or newer.=

_{How to Contribute =E2=80=A2 What to Expect from Maintainers}

&m=
dash;
You are receiving this because you are subscribed to this thre=
ad.
Reply to this email directly, book/react-native/issues/17432#issuecomment-368194946">view it on GitHub<=
/a>, or OFuhterQC2p_vqqAMeNxi1kzt0MZks5tX4CJgaJpZM4RR1yb">mute the thread. g alt=3D"" height=3D"1" src=3D"https://github.com/notifications/beacon/AO=
8bOCLeMRXd4v54VFWqSJsz3BzaeihGks5tX4CJgaJpZM4RR1yb.gif" width=3D"1" /> >

ta>

=

----==_mimepart_5a90da892a246_76d3fcb7c190f28262531--

[ADcorpo]

This is still happenning as of now (React Native 0.54)

[usfslk]

Also happens on react.js, borderWidth and borderColor are ignored if borderRadius is set to a default value

[rahulworld]

Can use
border: '1px solid #000000'
It will work.

[Rojuinex]

Still having this issue in 0.57.4