CSS3 border-radius(Rounded Corner) Online Debugging Tool
This is an online debugging and preview tool for CSS3 border-radius(rounded Corner) effect. The right side has the function of real-time debugging and displaying preview effects, and can generate corresponding css3 effect code in real time, which is convenient for friends who need it.
Preview Area
Code Area
Description
Safari
Firefox 3.5
Opera 10.5
Chrome
Internet Explorer
- border-radius:length
- Firefox supports border-radius (rounded corners): -moz-border-radius:2px;
- Safari and Chrome with webkit kernel support border-radius (rounded corners): -webkit-border-radius:2px;
- Opera supports border-radius (rounded corners): box-shadow:2px;
- IE does not support Box Shadow (shadow)
We can also freely specify the position of the rounded corners, the four directions of the top left, bottom left, top right, and bottom right. The specific notation in firefox, Safari and Chrome with webkit kernel, and opera (css3) is as follows:
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius
Border-radius (rounded corners) has other uses, and the other expressions of Firefox, Safari and Chrome with webkit kernel, and opera (css3) have slight differences, which can be viewed at the following URLs:
https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/