Design comparison
Solution retrospective
Not sure how to add a border radius to hero SVG. Looks like nobody else had trouble with it but I couldn't figure it out after hours of trying.
PS - I hate working with svgs
Community feedback
- @Make310Posted about 3 years ago
Hello, first, sorry for my bad english.
you probably have your image inside a div or seccion. all you have to do is add the following code to your div.
overflow: hidden;
what this code does is trim everything that comes out of the div, which in this case is the image which overflows the div.
Marked as helpful1 - @IsaacCastroCisnerosPosted about 3 years ago
use overflow: hidden to the img and you can see the borders
Marked as helpful0 - @vanzasetiaPosted about 3 years ago
👋 Hi Nicholas!
Yeah,
svg
is hard to work with 😅.I have some feedback on this solution:
- Accessibility
- Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (Tabs
) easily. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
- Create a custom
- Other
- I would recommend using the CSS
background
property for the wave background. You can put it on thebody
element. Based on my experience, this approach is much easier sincebackground
property can control its size and its position easily. - This site is only using the
Red Hat Display
font family. Why import theOutfit
font family?
- I would recommend using the CSS
* { ... // 👇 This font family got ignored font-family: "Outfit", sans-serif; // 👇 Only apply this font family font-family: "Red Hat Display", sans-serif; line-height: 1.5; }
That's it! Hopefully, this is helpful!
0 - Accessibility
- @ManuelCh02Posted about 3 years ago
Hey @Nick-Gersbach
Great Job! You can add a border-radius to the img tag to top-left and top-right.
Keep coding!
0 - @EdwinCacuangoPosted about 3 years ago
You can add border-radius to the img ussign your class ""hero-img. The border only to the top (right and left)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord