Image Bordering

Add a border around the images in the summary view.

The Mainroad theme in Hugo allows for custom styling using CSS. To add a border around images, follow these steps.

Refer the image below without any border

Default Theme

Change the below line in themes/mainroad/layouts/partials/post_thumbnail.html to include style with border size and color

<img class="thumbnail__image" src="{{ $thumbnail | relURL }}" alt="{{ .page.Title }}" style="border:3px solid black;">

Final image with border

Modified Theme