/    Sign up×
Community /Pin to ProfileBookmark

Bleeding borders with border-radius

Copy linkTweet thisAlerts:
Jan 01.2023

Hello everyone!

I have problems with border radius and bleeding borders.

Could you please take a look at this code:

https://codepen.io/hebrerillo/pen/KKBMVQa

Can you see the red bleeding border at the top-left corner?? I tried ‘background-clip: padding-box’ but it did not work.

How can I remove that??

Thank you a lot!!

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJan 01.2023 — Hi there jessPHP,

here is one possible solution...

[b]Full Page View[/b]

https://codepen.io/coothead/full/yLqJOWZ

[b]Editor View[/b]

https://codepen.io/coothead/pen/yLqJOWZ

[i]coothead[/i]
Copy linkTweet thisAlerts:
@RaagRaadhakJan 02.2023 — I had a problem with a bootstrap panel border or background bleeding to a HTML header <h> element above the bootstrap panel .
Copy linkTweet thisAlerts:
@hebrerilloauthorJan 02.2023 — Hello @coothead#1649565! And thank you so much for your answer! It was very helpful.

I saw the fix was to use a border in the container.

The codepen I posted was a small example of my real project. I did not want to post something big.

The fix has improved my real project, but still there is some bleeding.

Here is the codepen with the code of my real project.

https://codepen.io/hebrerillo/pen/ExpybQy

Can you see the black bleeding borders at the left corners?

I have tried so many things and I cannot remove it.
Copy linkTweet thisAlerts:
@cootheadJan 02.2023 — Hi there jessPHP,

I am unable to see anything wrong with you codepen example.

Of course, I must point out that at seventy nine years of age

my eyesight is most probably at fault. 🕶️ 😕

[i]coothead[/i]
Copy linkTweet thisAlerts:
@hebrerilloauthorJan 02.2023 — @coothead#1649590 , it is OK, no problem at all.

I would love to have your strength and skills when I am seventy nine!

If you did not try before, a zoom in will be helpful.
Copy linkTweet thisAlerts:
@cootheadJan 02.2023 — > @jessPHP#1649596

> If you did not try before, a zoom in will be helpful.

Actually, prior to my previous post, I did do a zoom-in test on this page...

https://codepen.io/hebrerillo/full/ExpybQy

...and at [b]200%[/b] saw this...

[img]https://www.coothead.co.uk/images/hover-me-now.png[/img]

I dismissed it's relevance though, as it never occured at any of the other values...

110%, 120%, 133%, 150%, 170%, 240%, 300%, 400% and 500%.

[i]coothead[/i]
Copy linkTweet thisAlerts:
@hebrerilloauthorJan 02.2023 — Hi @coothead#1649598 ! yes, it seems I also have to fix that
Copy linkTweet thisAlerts:
@AnawilliamJan 03.2023 — @coothead#1649565 Thank you for this possible solution
×

Success!

Help @hebrerillo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...