Home  >  Article  >  Web Front-end  >  How to set rounded borders in css

How to set rounded borders in css

coldplay.xixi
coldplay.xixiOriginal
2021-04-29 15:50:4020004browse

The way to set a rounded border in css is to use the rounded border [border-radius]. If the rounded corners of these four radians are the same, it can be written as [border-radius: 30px;].

How to set rounded borders in css

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to set rounded borders in css:

Basic usage of rounded borders (border-radius):

The most basic of rounded borders The usage is to set four rounded corners with the same arc

boder-top-left-radius:30px;      //左上角
boder-top-right-radius:30px;   //右上角
boder-bottom-left-radius:30px;  //右下角
boder-bottom-right-radius:30px; //左下角

If the four rounded corners are the same, it can be written as:

border-radius:30px;

cssSet the rounded border:

css Part:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html part:

 <div class="div1">圆角边框</div>

The effect is as shown:

How to set rounded borders in css

Recommended related tutorials: CSS video Tutorial

The above is the detailed content of How to set rounded borders in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to set padding in cssNext article:How to set padding in css