Css3_ basic graphic case for rounded corners of border properties

One, Square

div{background: #F00; width:100px; height:100px;}

Two, rectangular

Div{background: #F00; width:200px;height:100px;}

Three, round

Set the width and height values to be consistent (that is, squares), and the four fillet values are set to half their values.

Div{width:100px;height:100px;background:red;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius: 50px;}

Four, semicircular

DIV{WIDTH:96PX;HEIGHT:48PX;BORDER-TOP:2PX Solid red;border-right:2px Solid red;border-bottom:50px solid red;/* focus here * /BORDER-LEFT:2PX solid red; border-radius:100px;}

Five, Oval

div{width:200px;height:100px;background:red;-moz-border-radius:100px/50px;-webkit-border-radius:100px/50px; border-radius:100px/50px;}

Six, the upper triangle

div{width:0;height:0;border-left:50px Solid transparent;border-right:50px solid transparent;border-bottom:100px Sol ID red;}

6, Square

7, Square

8, Square

9, Square

10, Square

11, Square

12, Square

13, Square

14, Square

15, Square

16, Square

17, Square

18, Square

19, Square

20, Square

21, Square

22, Square

23, Square

24, Square

25, Square

26, 8 Point Star

div {    background:red;    width:80px;    height:80px;    position:relative;    Text-align:center;    -webkit-transform:rotate (20deg);       -moz-transform:rotate (20deg);        -ms-transform:rotate (20deg);         -o-transform:rotate (20EG);            Transform:rotate (20deg);} Div:before {    content: "";    Position:absolute;    top:0;    left:0;    height:80px;    width:80px;    background:red;    -webkit-transform:rotate (135deg);       -moz-transform:rotate (135deg);        -ms-transform:rotate (135deg);         -o-transform:rotate (135deg);            Transform:rotate (135deg);}

27. Diamond

div{    border-style:solid;    Border-color:transparent transparent red transparent;    border-width:0 25px 25px 25px;    height:0;    width:50px;    position:relative;    margin:20px 0 50px 0;} Div:after {    content: "";    Position:absolute;    top:25px;    Left: -25px;    width:0;    height:0;    Border-style:solid;    border-color:red transparent transparent transparent;    border-width:70px 50px 0 50px;}

28, Yin and yang gossip

div {    width:96px;    height:48px;    Background: #eee;    Border-color: #000;    Border-style:solid;    border-width:2px 2px 50px 2px;    border-radius:100%;    Position:relative;} Div:before {    content: "";    Position:absolute;    top:50%;    left:0;    Background: #eee;    border:18px solid #000;    border-radius:100%;    width:12px;    height:12px;} Div:after {    content: "";    Position:absolute;    top:50%;    left:50%;    Background: #000;    border:18px solid #eee;    border-radius:100%;    width:12px;    height:12px;}

Css3_ basic graphic case for rounded corners of border properties