Image border CSS help

[ankylosis]

For some reason, my image border only wraps the bottom part of the image (see screenshot).
I’m a css dolt. Any idea how to fix this?

The template:
<span class="images">{{images}}</span>

The images field:
<img src="lion.jpg">

The images class:

.images {
   border: solid 2px #cba77a;
}

[vaibhav]

Change the CSS code to

img {
   border: solid 2px #cba77a;
}

The code you used applies to the container of the images, not the image itself.

Also, you can remove the span tags if you don’t have any other use for them.

[ankylosis]

That worked perfectly! Thank you so much.
I’m glad someone out there is smart enough to understand css!

So I can style different images differently, I kept the “images” span and tried the following, which by some miracle seems to work. Do you think it’s the right way to do it?

.images > img {
   border: solid 2px #cba77a;
}

[vaibhav]

Yes, that’s the right way.

[ankylosis]

Awesome. Thank you again.

[Utis]

Just some additional information: You were trying to put a border on an inline element (span). For the result you were expecting, you have to set it on a block element. Setting it on img is perfectly fine, as it is a block element. Alternatively, you could have used a div. For comparison:

<style>
   .images {
			border: 2px solid red;
		}
</style>

<div class="images">
  <img src="https://picsum.photos/800/600">
</div>

<!-- You'd get the same result if you turn a span into a block element via css. -->
<style>
	.images {
		display: block;
	}
</style>
<span class="images">
  <img src="https://picsum.photos/800/600">
</span>
<!-- (That one is strongly discouraged, though, it's  confusing for somebody reading your code and leads to maintenance nightmares. Styling `img` is fine.) -->

[ankylosis]

Thank you, I greatly appreciate the pointers.
It’s been about ten years since I read a book about CSS3, I’m overdue for a refresher. What you wrote helped.