HTML and CSS Reference
In-Depth Information
Example
<div style="border: 1px solid red;-moz-border-radius-topleft: 10px;-webkit-
border-top-left-radius: 10px;border-top-left-radius: 10px;">
Top left corner
</div>
Compatibility
CSS3
Firefox 3+, Safari 3+
Note
• Mozilla-based browsers like Firefox define this property as
-moz-border-radius-
topleft
while WebKit-based browsers like Chrome and Safari define it more
traditionally as
-webkit-border-top-left-radius
. Given the differences, you
should test it carefully as syntax may change.
border-top-right-radius
This property is used to round the top-right border corner specifically.
Syntax
border-top-right-radius:
horizontal-radius vertical-radius
Example
<div style="border: 1px solid red;-moz-border-radius-topright: 5px;-webkit-
border-top-right-radius: 5px;border-top-right-radius: 5px;">
Top right corner
</div>
Compatibility
CSS3
No IE support, Firefox 3+, Safari 3+
Note
• Mozilla browsers define this property as
-moz-border-radius-topright
while
WebKit-based browsers define it more traditionally as
-webkit-border-top-right-
radius
. Given the differences, you should test it carefully as syntax may change.
box-reflect
This property specifies the size of the mask.
Syntax
-webkit-box-reflect:
direction offset mask-box-image
where
direction
can be
above
,
right
,
below
, or
left
and indicates where the reflection
should appear.
offset
specifies the distance from the original image to the reflection and
can be a length or percentage.
mask-box-image
is a mask following the form of the
mask-
box-image
property that overlays the reflection.
