question-mark
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.

[Borders] Halo shows through rounded borders

See original GitHub issue

If you have a view with a background color that is different than the border’s color, the background color seeps through the rounded borders.

example

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:closed
  • Created 8 years ago
  • Comments:10 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
nikolozacommented, Dec 4, 2017

The same issue here. Problem with borderWidth + borderRadius rendering:

image

0reactions
nikolozacommented, Dec 6, 2017

Actually, using boxShadows instead of border did the great workaround.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found