Shapes

Change the shape using rounded-* classes

Image Shapes

To give an image 1px border appearance use thumbnail props. And you can control which corners are rounded by setting the rounded prop to one of the following values:

true (or prop present with no value): round all corners
false (or prop not present): no explicit rounding or corners (default)
'top': round the top corners
'end': round the right corners
'bottom': round the bottom corners
'start': round the left corners
'circle': make a circle (if square image) or oval (if not square) border
'0': explicitly turn off rounding of corners

							
                                
<template>
    <BContainer class="py-3">
        <BRow>
            <BCol sm="6" md="3">
                <!-- BImg is a component that imported from bootstrap-vue-next, but no need to import -->
                <BImg fluid src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid rounded src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid rounded="circle" src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid thumbnail src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
        </BRow>
    </BContainer>
</template>

Shapes

Change the shape of an image using .rounded or .circle.rounded-1,2,3

							
                                
<template>
    <div class="d-17 bg-gray-light-4"></div>
    <div class="d-17 bg-gray-light-4 circle"></div>
    <div class="d-17 bg-gray-light-4 rounded-15"></div>
    <div class="d-17 bg-gray-light-4 rounded-10"></div>
    <div class="d-17 bg-gray-light-4 rounded-5"></div>
</template>

Class	Values
`class="rounded-[value]"`	1 / 2 / 3 / 4 / 5 ... / 34 (step of 1)

Image Shapes
Shapes