[BD-46] fix: fixed rounded corners for Card.ImageCap component

[PKulkoRaccoonGang]

Description

Issue: #2473

Deploy Preview

Card component

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e25a5aa
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/64cbf93c104c2c00087ac19a
😎 Deploy Preview	https://deploy-preview-2496--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (8ecb3b5) 91.39% compared to head (e25a5aa) 91.39%.
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2496   +/-   ##
=======================================
  Coverage   91.39%   91.39%           
=======================================
  Files         234      234           
  Lines        4161     4161           
  Branches     1001     1001           
=======================================
  Hits         3803     3803           
  Misses        351      351           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[adamstankiewicz]

[curious] I'm wondering if an alternative approach was explored? That is, what if the parent .pgn__card had an overflow: hidden style property such that any children (e.g., .pgn__card-image-cap) wouldn't need to specify identical border radius values to match the overall .pgn__card border radius.

Also, the value for $card-image-border-radius is slightly different than the border radius on the parent Card (5px vs 6px when computed).

I'm also wondering if we should not rely on a border radius variable specific to Card.ImageCap; rather should we rely on the $card-border-radius since this values should

[PKulkoRaccoonGang]

Yes, your proposal about overflow: hidden best solution in this case.
Please, take a look

[adamstankiewicz]

LGTM!

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

🎉 This PR is included in version 20.45.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀