例如：
border: 5px solid blue 表示边框颜色是绿色；
border: 5px solid red 表示边框颜色是红色；
扩展资料
border的用法介绍
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000也是允许的。
这个只要将元素样式的hover伪类设置边框即可。
<!DOCTYPE html><html lang="en">
<head>
<style>
.div-style1
{
width: 200px
height: 200px
background-color: red
float: left
}
.div-style2
{
width: 200px
height: 200px
background-color: darkgray
float: left
margin-left: 20px
}
.div-style1:hover
{
width: 200px
height: 200px
background-color: red
border: 5px solid black
}
.div-style2:hover
{
width: 200px
height: 200px
background-color: darkgray
-webkit-box-shadow: 0 0 8px black
-moz-box-shadow: 0 0 8px black
box-shadow: 0 0 8px black
}
</style>
<meta charset="UTF-8">
<title>标题一</title>
</head>
<body>
<div class="div-style1">
移上去显示黑框
</div>
<div class="div-style2">
移上去显示阴影
</div>
</body>
</html>
以上就是鼠标移动到元素上显示黑框的一个实例。做了两个效果，一个是边框，一个是阴影。
