如何在HTML CSS中添加彩色圆形边框

Question

我已经在html/css中舍入了一个图像，但现在我想在该图像周围添加一个边框。唯一的问题是没有边界。

这是我的代码HTML

<img src="smiling.png" class = "roundedImage" style =width:20px;height:20px;>

这是CSS代码

.roundedImage {
background-repeat: no-repeat;
background-size: cover;
border-width: 1px;
border-color: Black;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}

图片显示圆形但没有彩色边框。

Answer 1

对于边界，您可以执行以下操作：

border: 1px solid black;

然后你可以删除这些：

border-width: 1px;
border-color: Black;

或者只是添加（正如@Steve Sanders所指出的）：

border-style: solid;

Answer 2

这应该可以做到（不是px，而是%）：

.roundedImage {
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

边框样式必须是实心的，否则你将看不到任何线条：）

http://jsfiddle.net/4mezhws7/

Answer 3

我相信在"class"和等号之间有一个空格。等号和语音标记之间有空格。"style"和等号之间的空格。另外，在你的style内容周围没有语音标记，也没有反斜杠来结束img标记。

最后，我真正认为的是，你需要一种边界风格。

Border-style: solid;

Answer 4

在css中只需添加border-color: 1px solid black;。这将为您的边框颜色提供