Repository navigation
Background color visible through the border of a border radius #904
Description
When a <View /> component uses backgroundColor and borderRadius, the background color is still visible over the edges of the border.
Screenshot:
Example code:
var MyComponent = React.createClass({
render() {
return <View style={styles.example} />
}
});
var styles = StyleSheet.create({
example: {
backgroundColor: 'white',
borderRadius: 16,
borderWidth: 1,
borderColor: 'black'
}
});
Activity
brentvatne commentedon Apr 17, 2015
Hi there! Try setting
overflow: hidden, does that fix it?brentvatne commentedon Apr 18, 2015
@frostney - does this still occur on 0.4.0 for you?
I can only reproduce this when I have some other item inside, eg: , which inherits the background colour of the parent by default and does not have border radius and so it appears to be outside of the rounded corner. You will have to use
overflow: hiddenas mentioned above to fix that issue.frostney commentedon Apr 20, 2015
overflow: hiddendoes fix it for me. Thank you.I hope it's ok that I'm closing this issue.
Edit: The code example is more stripped down than I intended it to be. This issue occured for me on views (with borderRadius and backgroundColor) that had texts and views as its children (those were without background color or borderRadius) and when I created the code example I forgot to copy over the hierarchy from the production code to the example code while making a screenshot from the production code. Sorry about that.
brentvatne commentedon Apr 20, 2015
@frostney - no problem, glad it helped! 😄
ms88privat commentedon Aug 24, 2015
overflow: 'hidden' does fix it for me too.
Thats not the expected css behaviour. Maybe we should write it in the docs.
Greetings
nicklockwood commentedon Jan 7, 2016
I believe this now works correctly.
zebulgar commentedon Mar 3, 2016
I still have this issue but only with absolutely positioned views. The overflow: 'hidden' works for me as well.
BGuven commentedon Apr 11, 2016
It is still an issue but overflow: 'hidden' works. Thanks.
uandco commentedon Apr 27, 2017
The issue with overflow is you can't use shadows anymore as they are considered as overflowing elements.
anceque commentedon Jun 15, 2017
as @uandco mentioned, the overflow cannot be used together with shadow properties.. What is the workaround here?