Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Applying borderRadius to <Text> ignores backgroundColor

See original GitHub issue

Description

Applying a borderRadius to a <Text> element with a border and a backgroundColor only affects the actual border. The backgroundColor stays square. If this is intended behaviour the documentation has to be changed cause it says <View> style applies to <Text> aswell Text Style but this behaviour does not appear to a <View> element.

example <Text style={{ backgroundColor: '#f008', borderWidth: 1, borderColor: '#000', borderRadius: 12, padding: 8 }}>Test text</Text>

produces

according to my expectations, backgroundColor should be rounded corners aswell?

Reproduction

Try this snippet to reproduce. <Text style={{ backgroundColor: '#f008', borderWidth: 1, borderColor: '#000', borderRadius: 12, padding: 8 }}>Test text</Text>

Additional Information

React Native version: 0.36
Platform: iOS, don’t know about Android
Operating System: MacOS

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:10 (3 by maintainers)

Top GitHub Comments

27reactions

steidacommented, Jan 21, 2017

Try overflow=“hidden”, it should help.

2reactions

neikercommented, Mar 15, 2018

I do not understand the logic behind this, a workaround not means a solved bug.

/cc @hramos

Top Results From Across the Web

React Native Border Radius with background color

Thanks. Yes, putting the backgroundColor and borderRadius on the container, then adding overflow: 'hidden' to the container worked for me ...

CSS border-radius property - W3Schools

The border-radius property defines the radius of the element's corners. ... Set rounded corners for an element with a background color: #rcorners1 {...

Incorrect background-color bleeds on cell corners using ...

Set ROW background-color, then target one CELL in ROW and give it a new background-color plus a border-radius:>0. Actual results: The exposed corners...

How to introduce rounded cells with a background color?

I have seen how to create cells with rounded borders, but is it possible to make a cell that will have no borders,...

Window.scss Source Code | Ext JS

See also: {@link #$window-ignore-frame-padding}. */. $window-padding: dynamic($panel-frame-padding);. /**. * @var {number}. * The border-radius of Windows.