Add border styling options for structured content images (#577)

* Add border styling options for structured content images

* Replace border style, width, and color properties with shorthand

---------

Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>

2 files changed, 12 insertions, 1 deletions

diff --git a/ext/js/dictionary/dictionary-importer.js b/ext/js/dictionary/dictionary-importer.js
index c8f68d78..0feed8b2 100644
--- a/ext/js/dictionary/dictionary-importer.js
+++ b/ext/js/dictionary/dictionary-importer.js
@@ -486,9 +486,16 @@ export class DictionaryImporter {
      * @param {import('dictionary-database').DatabaseTermEntry} entry
      */
     async _resolveStructuredContentImage(context, target, source, entry) {
-        const {verticalAlign, sizeUnits} = source;
+        const {
+            verticalAlign,
+            border,
+            borderRadius,
+            sizeUnits
+        } = source;
         await this._createImageData(context, target, source, entry);
         if (typeof verticalAlign === 'string') { target.verticalAlign = verticalAlign; }
+        if (typeof border === 'string') { target.border = border; }
+        if (typeof borderRadius === 'string') { target.borderRadius = borderRadius; }
         if (typeof sizeUnits === 'string') { target.sizeUnits = sizeUnits; }
     }
 
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index f73d790a..ee86a7f4 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -73,6 +73,8 @@ export class StructuredContentGenerator {
             collapsed,
             collapsible,
             verticalAlign,
+            border,
+            borderRadius,
             sizeUnits
         } = data;
 
@@ -130,6 +132,8 @@ export class StructuredContentGenerator {
         }
 
         imageContainer.style.width = `${usedWidth}em`;
+        if (typeof border === 'string') { imageContainer.style.border = border; }
+        if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; }
         if (typeof title === 'string') {
             imageContainer.title = title;
         }