Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 1 • Borders

border:5px dashed #A7A9AC;
border:5px double #A7A9AC;
border:5px inset #C7C8C9;
Figure 5: Dashed, inset, and ridge border styles.
border-radius:10px;
border-radius:20px 0px 20px 0px;
Figure 7: You can specify the same radius for each corner or you can alternate radius sizes for a different look.
border:2px solid #ff58ba;
border-radius:7px;
background:url(pics/2_pink_flowers.png) #FFF center center;
border-radius:30px;
background:url(pics/leaves.png) #FFF;
Figure 8: Here, background images are masked by their radiused borders.

Great minds discuss ideas; average minds discuss events; small minds discuss people. Eleanor Roosevelt

Figure 9: By setting a larger border radius than the border thickness, and only displaying borders on opposite sides, the tapers on the border corners can become a design element.
height:150px;
width:150px;
border:3px solid #64D1DD;
border-radius:50%;
height:100px;
width:150px;
border:3px solid #64D1DD;
border-radius:50%;
Figure 11: By setting all four border radii to 50%, you can size the box to get a perfect circle (height and width are equal), or any shape of ellipse (width and height are different).