Css3 rounded border creation method, css3 rounded border

Css3 rounded border creation method, css3 rounded border

It is often seen that someone else's website has a border to modify the text area, similar to the rounded rectangle to wrap the text, especially feeling, so I tried to use the border to modify the image, however, using too many images will slow the loading of webpages. Can I use css3 to achieve the border rounded corner effect? Of course, border-radius can be implemented only in firefox, Safari, and Chrome.

W3C has developed the CSS3 attribute that implements CSS rounded corners for a long time: border-radius. Firefox and Safari also implement this feature through private attributes:

 

 

1	<div style=" border-top-left-radius: 55px 25px; border-bottom-left-radius: 55px 25px; border-top-right-radius: 55px 25px; border-bottom-right-radius: 55px 25px; border: 1px solid #000; padding: 10px;"> Firefox and Safari achieve rounded corners </div>

 

Firefox and Safari use private attributes to achieve rounded corners;
This indicates the color of the bottom image in the border;
Border: 1px solid #000; indicates the border width, solid, and black color;
Border-top-left-radius: 55px 25px; it indicates the border rounded corner effect in the upper left corner. It can be recognized in English: top, left, and the length of the rounded corner can be adjusted by controlling the pixel value, 55px indicates the horizontal length, and 25px indicates the vertical length;
Similarly, border-bottom-right-radius: 55px 25px; you only need to change the top corner to bottom in the lower right corner;
Use css3 to achieve the border rounded Corner Effect

Among them,-moz-border-radius is the private attribute of Firefox to achieve rounded corners, while-webkit-border-radius is the private attribute of webkit kernel browsers (such as Safari and Chrome) to achieve rounded corners, if you specify a corner as a rounded corner, they define four attributes respectively:

-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radius