CSS rounded border code how to write? (code example)

This article mainly introduces the CSS border effect how to realize.

A concrete example of CSS rounded border code is as follows:

<! DOCTYPE html>
Effects such as:


The main attribute involved here is Border-radius, which allows the CSS rounded border to be adjusted.

Note: How to use Border-radius:

Border-radius:1-4 length|%/1-4 length|%;
Set the four values for each radii in this order. If Bottom-left is omitted, it is the same as top-right. If Bottom-right is omitted, it is the same as Top-left. If Top-right is omitted, it is the same as Top-left.

-webkit-border-radius is designed to be compatible with Chrome or Safari.

-moz-border-radius is designed to be compatible with Firefox.