Remove rounded corners on MCH gallery (i.e., I want square corners)

[TheTao]

What I’m trying to do

I’m trying to create a gallery of images using the MCH Gallery code. I have this

> [!blank-container|gallery] layout wireframes
> ![[WebsiteLayouts_Wireframes-01.webp]]
> ![[WebsiteLayouts_Wireframes-02.webp]]
> ![[WebsiteLayouts_Wireframes-03.webp]]
> 
> ![[WebsiteLayouts_Wireframes-04.webp]]
> ![[WebsiteLayouts_Wireframes-05.webp]]
> ![[WebsiteLayouts_Wireframes-06.webp]]
> 

This gives me an image gallery of images with 3 across and 2 down. This is good.

However, the images all have rounded corners – not so good. I’d like square corners so it just shows the image. It would be also nice if they had a black border of 3-4 pixels.

Things I have tried

I looked in the MCH styles settings, but didn’t see anything promising.

I tried creating the following snippet

.sqcorners1 {
  border-radius: 0px !important;
  border: 3px solid #000 !important;
}

I enabled it in appearance and added sqcorners1 to cssClass property in the front matter for the page. Didn’t make any difference

When I looked at the MCH documentation, it looked like there were some callout paramters (e.g., no-margin), but I haven’t found any documentation on that. I thought there might be something there that would allow me to disable rounded corners. If there is, and someone can point me to the documentation, that would work too.

[ariehen]

I picked gallery-1 so you can still use gallery if you ever wanted to. It can be changed. Give this a try. In your note, for example:

> [!blank-container|gallery-1] 
> ![[ofuro.jpg]]
> ![[ofuro.jpg]]
> ![[ofuro.jpg]]
> 
> ![[ofuro.jpg]]
> ![[ofuro.jpg]]

and the CSS:

div[data-callout-metadata*="gallery-1"].callout > .callout-content > p img {
    border-radius: 0px;
    border: 3px solid #000;
}

[TheTao]

That worked perfectly. I also figured out that I had misread the mch configuration 'Image Border Radius" as just “Image border”. I was surprised that this gets applied to all images in my vault and not just the ones in the gallery callout

I like your solution because I get a page solution where the setting in the style plugin is global.

Thanks for your help