What's the right way to define the style of the images inside my gallery div?

Question

I have a div with an id of 'gallery' and I want to style the images inside it. Specifically, I want to give each of the images a 1px solid yellow border except on the bottom because they sit on top of each other, so I don't want to double the border on the bottom.

What I'm confused about is how to choose between the different border style elements: border, border-style, border-width. I tried this:

div#gallery img
{
    border-width:1px;
    border-style:solid;
    border: solid yellow;
    border: 1px 1px 0px 1px;
}

I managed to get a yellow border with this css above but the border seems more like a 2px border - it's quite thick - and, besides that, the syntax I'm using doesn't look very elegant.

Any recommendations on how to do this more concisely/elegantly?

Answer 1

I think this is the best way:

border: 1px solid yellow;
border-bottom: none;

The syntax for the border declaration goes width style color and affects all four borders. After that, you can override the bottom back to using no border by declaring border-bottom as none.

Answer 2

I don't really know if there's a wrong way to do it, but you basically have 3 methods to do it:

Method 1

border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;

Method 2

border: 1px solid yellow;
border-bottom: 0;

Method 2

border: 1px solid yellow;
border-bottom: none;

I would prefer either method 2 or method 3.

(I know method 2 and method 3 are basically the same, but I wanted to give both solutions, so you can choose what you like, "none" or "0").