Issue Description: I'm experiencing an issue with applying border radius to a div in my project. When I add the border radius, it affects all sections of the container, causing unexpected curves in the center. How can I apply border radius to only specific sections of the div while keeping other sections unaffected?
CSS Code: Here's the CSS code I'm using to apply the border radius to my div container:
.container {
border-radius: 10px;
}
Desired Outcome: My goal is to have rounded corners on all four corners.
The problem you are mentioning is because you are using the same class on different divs:
<div class="container"></div>
All the <div> tags that have the .container class, will have the border-radius. So the solution for that is to create a class only to apply the border-radius to the container that you want:
HTML:
<div class="container border"></div>
(Your can apply multiple classes to a <div> just separating them with a space. Here the <div> have the class "container" and the class "border")
after completing this project, here's my reflection based on the following questions :
What did you find difficult while building the project?
A: a difficulty I experienced was figuring out how to align the component exactly to the center of the webpage. Took me a while alongside a few attempts to get it right but eventually I was able to figure it out.
Which areas of your code are you unsure of?
A: so far, I didn't have much issues coming into this challenge other than feeling skeptical of how I aligned the qr code component as a whole.
Do you have any questions about best practices?
A: what are some resources that I can refer to for me to improve my html/css positioning? as I continue my learning I want to improve the way I position elements and learn the best practices in doing so.
I know flexbox probably would have been easier, but I wanted to see if I could solve this using only the box model. So it might be a little messy/excessive. Also had some issues with centering again, and now that I'm looking at it I'm worried it might not actually be centered.
Still a little confused about ids vs classes. If I'm only using the div container once, that should be an id, right?
If anyone wants to offer any help/advice/constructive criticism I would appreciate it!
Regarding the div container question, in this case, you should use an ID. IDs are used to select only one HTML element at a time. Therefore, you can't use the same ID name for two different elements. On the other hand, classes are used to apply the same style to multiple HTML elements.
