HTML/CSS Card Border

Learning Challenge

Card Box

Question

I am at a point in the HTML/CSS assessment where I have no idea where to go from here. I’ve reached the point where I’m beginning to work on the picture card and I just can’t figure out how to have the border of the card appear. I’m continuing to work on the other elements of the assessment but because it feels like such a simple element, I’m becoming too frustrated with it to work.

What I have realized is that when I tried to center the container that holds all the elements, they all move together, my sole problem is that I have no idea how to have the actual border/card appear.

What I’ve tried

I’ve tried changing the contents of the container; moved all the “text” elements into one class, moved all the closing div tags towards the end because I assumed there was something wrong with how I contained the elements. Changed the color, margin and width of the container (.card)

Screenshots


Hi Kyle, and welcome to the community!

Although you’re not seeing success in the browser, I you are REALLY close to having a working border, so please don’t get discouraged!

I see that you are assigning styling to the card class, and you have set the color and size of the border. I think you are just missing the border-style, which allows you to set whether the border should be dashed, transparent, solid, etc. You can set this as its own attribute, or incorporate it into the one-liner border attribute that you already have. Without setting the style, none of the other border attributes will show up!

Check out the MDN documentation for some more detail.

Let us know what you find out!
Jesse

Thanks a lot for that, I didn’t realize border-style existed. Managed to get the border to appear and styled the rest of the content to look similar to the assessments. Another quick question about the card/content is: In the assessment screenshot, the inside portion of the card has a rounded border and I’m not sure if we’re being graded on that because it’s not explicitly in the requirements but I’d rather not waste one of the misses on that simple mistake. But I can’t get that border to curve.
Page
My CSS:


My HTML:

I realized that all the content need to be grouped up in another container that isn’t the card class so I created the container class. I did some research on border-style and figured the ‘hidden’ option was probably what I was looking for but no matter what I do I can’t get the inside container to curve. I didn’t want to add depth to the border command because I figured it would cause a visible space to appear between the picture and the card. I’ve messed around with some of the other options aside from hidden like solid but nothing happens if the border color is assigned to any color. I got rid of the border command and the border with a style of solid was made but it was a solid black border that warped some of the styling of the other content.

Alright so after some messing around, I’ve come to a realizations.

  1. image
    I realized, what if the border is actually a separate entity that isn’t actually attached to what I want it to be? Having it the color white would have it not show up. Changed the color and found out that the border command is probably not what I want because it’s creating a border rather than transforming the edges.
    image
    I’m continuing to play with border-radius which doesn’t require a border command to be able to manipulate it? To no avail as of now but still doing some research.

Good morning Kyle,
It’s great to see your experimentation and learning process here! It looks like you are doing a lot of learning through discovery.

To answer the original question, you are correct that there is not a specification about the rounded edges, so it is not possible to lose points on that detail. If your project meets all of the specifications in the bullet points, then you should be all set!
Jesse