如何让Bootstrap rounded类的容器或图片圆角效果更显著？

我之前参考了网格布局的图片圆角设置方法，给页面网格里的每张图片都加上了基础圆角效果，目前的基础效果已经符合预期，效果可参考下方截图。

但我现在想要更突出的圆角弧度，也就是截图里绿色标线大致标注的那种大圆角效果，请问要怎么调整实现？

我当前使用的代码如下：

<img class="rounded" src="img.png">

实现方法 #

你目前用到的rounded类，是前端框架里预设的圆角样式类，它自带的圆角半径是固定的小尺寸——常用框架给这个类预设的默认圆角通常只有4px左右，所以视觉上的弧度会很不明显。
如果想要更突出的圆角效果，直接调整图片的border-radius属性数值即可，逻辑很简单：

• 这个属性的数值越大，视觉上的圆角弧度就越突出
• 中等程度的突出效果，可以把数值设为8px~16px区间
• 如果想要实现截图里那种非常圆润的大圆角效果，可以直接把圆角半径设为图片短边长度的一半，就能得到接近胶囊形态的柔和圆角

举个自定义样式的例子：

/* 覆盖默认的小圆角，实现大弧度效果 */
img.rounded {
  border-radius: 20px; /* 可根据自己想要的弧度大小自由调整数值 */
}

内容的提问来源于stack exchange，提问作者stevec