Rounded lightbox image

2 files changed, 3 insertions, 1 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 4f18424..b62c353 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -34,6 +34,7 @@
             max-block-size:  props.get(vars.$image--max-height);
             padding:         props.get(vars.$pad);
             margin-inline:   auto;
+            border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
         }
 
         @include bem.elem('thumbnails') {
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 34d271e..cc926e4 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -6,7 +6,8 @@
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
 $fullscreen--height:  props.def(--o-lightbox--fullscreen--height, 100vh) !default;
 
-$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
+$image--max-height:    props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
+$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default;
 
 $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;