HTML and CSS Reference
In-Depth Information
border-image: url(starborder.png) 50px 50px 50px 50px stretch
stretch;
color: red; background-color: red; height: 150px; width: 30%;
padding: 10px; border: 50px dashed black;">
<h1> 4th of July </h1>
</div>
O NLINE http://htmlref.com/ch6/borderimage.html
Compatibility
CSS3
Firefox 3.5+
Safari 3+
Notes
• In Mozilla-based browsers like Firefox this property is -moz-border-image and in
WebKit-based browsers like Chrome or Safari it is -webkit-border-image .
• The border image will tile over the center of the image as well, but if you make it
transparent, you can have a background image or color show as well.
• The border image will cover a defined standard border, so it is useful to have a
fallback in case browsers do not support this emerging property.
border-radius
This property is used to round border corners.
Syntax
border-radius: horizontal-radius vertical-radius
where the radius values are set as lengths. A single length value defines the radius of all
corners, or each can be specified one by one from top-left, top-right, bottom-right, and
finally bottom-left.
Examples
<div style="border: 1px solid red;-moz-border-radius: 15px;-webkit-border-
radius: 15px;border-radius: 15px;">
All corners
</div>
<div style="border: 1px solid red;-moz-border-radius: 15px 30px 5px 70px;
-webkit-border-radius: 15px 30px 5px 70px; border-radius: 15px 30px 5px
70px;">
Vary Each
</div>
<div style="border: 1px solid red;-moz-border-radius-topleft: 15px;-webkit-
border-top-left-radius: 15px;border-top-left-radius: 15px;">
Left corner
</div>
Search WWH ::




Custom Search