<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/css3.css">
</head>
<body>
<div id="simple">Simple Border</div>
<div id="dashed">Dashed Border</div>
<div id="dotted">Dotted Border</div>
<div id="groove">Groove Border</div>
<div id="inset">Inset Border</div>
<div id="outset">Outset Border</div>
<div id="ridge">Ridge Border</div>
<div id="round">Rounder Border</div>
<div id="veryround">Rounder Border</div>
<div id="shadow">Outset shadow</div>
<div id="ishadow">Inset shadow</div>
<div id="mixed">Mixed Border</div>
<div id="button">Button</div>
</body>
</html>
div{
width:200px;
margin:5px;
padding:2px;
text-align: center;
}
#simple{
border:1px solid black;
}
#dashed{
border:1px dashed black;
}
#dotted{
border:1px dotted gray;
}
#groove{
border:5px groove blue;
}
#inset{
border:5px inset red;
}
#outset{
border:5px outset blue;
}
#ridge{
border:5px ridge black;
}
#round{
border:1px solid;border-radius: 5px;
}
#veryround{border:1px solid;border-radius: 50%}
#shadow{
margin:10px;
border:1px solid black;
box-shadow: 5px 5px 3px 2px blue;
}
#ishadow{
margin:15px;
border:1px solid black;
box-shadow: 5px 5px 3px 2px blue inset;
}
#mixed{
border-top: 1px solid;
border-top-left-radius: 5px;
border-left: 1px dotted;
border-bottom: 5px ridge;
border-bottom-right-radius: 10px;
}
#button{
width:150px;
background-color: #2233FF;
color:white;
border:5px outset blue;
border-radius:50%;
}
