ShowTable of Contents
Round corners
Firefox and other Mozilla browsers and Safari, Konqueror and other Webkit browsers support round edges:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
InternetExplorer does not support round edges via CSS, even not in IE 8.
See also http://kalsey.com/2003/07/rounded_corners_in_css
and http://www.fritscher.ch/dojo/roundedcorners.html.
Pointer attached to the border of a box
Create an empty div with a style like this.
For example, a pointer attached to the left border. Play with margin-left and -width properties.
.boxPointerRight {
position:absolute;
margin-left:-23px;
width:0;
height:0;
border-left: 0;
border-right-style:solid;
border-right-width:16px;
border-right-color:blue;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
Cross browser gradients
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9e1f0', endColorstr='#f0f3f9');
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d9e1f0), to(#f0f3f9));
background:-moz-linear-gradient(top,#d9e1f0,#f0f3f9);