div块的各种边框名称如以下HTML代码以内的中文名字，还可以见到一些特殊边框及其代码。对照片同样有效，div直接贴图image就行了，自行设定div的宽度高度。

CSS

<style>
div {
  width:150px; 
  height: 150px;
  margin: 10px;
  float: left;
  text-align:center;
  line-height:150px;
  font-size: 24px; color:#FF7B3A;font-family:Microsoft JhengHei;
  border: 10px solid #F54;
}
.rounded {
  border-radius: 30px;
}
 
.asymmetric-radius {
  border-radius: 30px / 90px;
}
.asymmetric-corners {
  border-radius: 90px 60px 30px 5px;
}
.percentages {
  border-radius: 50%;
}
.sub-properties {
  border-top-left-radius: 10px;
  /* Note there is no / symbol here! */
  border-bottom-right-radius: 80px 40px;
}
.brackets {
  border-top: none;
  border-bottom: none;
  border-radius: 30px / 90px;
}
.inner-brackets {
  border-top: none;
  border-bottom: none;
  border-radius: 20px / 70px;
}
span{
  width:120px;  
  height: 130px;
  margin: 7px;
  float: left;
  border: 8px solid #F54;
  font-size: 18px; color:#FF7B3A;font-family:Microsoft JhengHei;
}
.squarebrackets { 
    border: none;
    position: relative;
    width: 150px; 
    height: 150px;
    padding: 0;
    margin: 1em;
}
.squarebrackets:before, .squarebrackets:after{ 
    content: ''; 
    display: block; 
    height: 100%; 
    width: 15px; 
    border: 8px solid #F54;
    position: absolute;
    top: -5px;
}
.squarebrackets:before{ left: 0; border-right: 0; }
.squarebrackets:after{ right: 0; border-left: 0; }

</style>

HTML

<div>方形框</div>
<div class="rounded">圆角形框</div>
<div class="asymmetric-radius">椭圆边形框</div>
<div class="asymmetric-corners">半圆形框</div>
<div class="percentages">圆形框</div>
<div class="sub-properties">单圆角形框</div>
<div class="brackets">小括号形框</div>
<div class="brackets"><span class="inner-brackets">双小括号形框</span></div>
<div class="squarebrackets">中括号形框</div>