[Borders] Halo shows through rounded borders
See original GitHub issueIf you have a view with a background color that is different than the border’s color, the background color seeps through the rounded borders.
Repro:
<Text style={styles.marker}>1</Text>
marker: {
color: 'white',
backgroundColor: 'blue',
width: 17,
height: 17,
lineHeight: 15,
borderWidth: 1.5,
borderColor: 'white',
borderRadius: 17 / 2,
overflow: 'hidden',
}
Issue Analytics
- State:
- Created 8 years ago
- Comments:10 (8 by maintainers)
Top Results From Across the Web
[Borders] Halo shows through rounded borders | Voters
[Borders] Halo shows through rounded borders. mkonicek. Moved from https://github.com/facebook/react-native/issues/2017.
Read more >Best way to remove CSS rounded-corner halo? - Stack Overflow
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), ......
Read more >1473083 - div with border-radius has visible "halo"/"fringe" of ...
The bogus email address gets a red background with a white rounded border, and the red background visibly leaks past the border to...
Read more >The Seashores Of Old Mexico (Closed Captioned) - YouTube
Purchase George Strait's latest music: http://umgn.us/georgestraitpurchaseStream the latest from George Strait: ...
Read more >How To Style HTML Elements with Borders, Shadows, and ...
The border-radius property creates rounded corners on boxes, and can even make a circular shape. Lastly, outline is an often overlooked property ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The same issue here. Problem with borderWidth + borderRadius rendering:
Actually, using
boxShadows
instead ofborder
did the great workaround.