Custom Borders

This text is typed into a (default) Paragraph Block using the WordPress Gutenberg block editor (aka “Gutenberg”).

Below is an Image Block —

Next I’ll add a Custom HTML block, and in it I’ll style a fat magenta dotted border around the same image.

Below is the custom HTML I used to do it —

<div style="border-style:dotted; border-width:22px; border-color: magenta; padding:16px;">
<img alt="optical illusion #002" src="https://tritoma.com/wp-content/uploads/2021/03/optical-illusion_002.jpg" style="width:100%;"/>
</div>

You can play around with various CSS border style properties.

This is a box with a RED dotted border around an image.

<div style="border-style:dotted; border-width:13px; border-color: green; padding:16px;">
	This is a box with GREEN a dotted border.
</div>

<div style="border-style:dotted; border-width:13px; border-color: red; padding:16px;">
	<img src="https://tritoma.com/wp-content/uploads/2021/03/optical-illusion_002-200x125.jpg" style="width:100%; padding:4px;" alt="optical illusion #002"><br>
	This is a box with a RED dotted border around an image.
</div>