Share how to make CSS rounded borders other than border-radius

It is quite easy to use the border-radius attribute of CSS3 to make rounded borders. However, the browser compatibility problem is not easy to deal with. Here we will summarize the methods of making CSS rounded borders other than border-radius.

CSS3’s border-radius
Use p+CSS to generate a rounded border, which is used in many cases. Currently, one of the rounded borders of p+CSS is to use CSS3. One is to use layout to simulate rounded corners.
Let’s talk about the first method first, using CSS3. The premise is that your browser must support CSS3. Firefox3 supports it. Many websites I see have rounded corners directly generated using CSS3. It is nothing more than right angles still displayed under IE. , let ie be stubborn.

Using CSS3, you can specify that all four corners are rounded, or a certain corner is rounded, which is very convenient. The code is as follows:

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}

##< ;p id="round">

Rounded border

Partially rounded corners

> ;

Realize rounded corners without using border-radius
In CSS3, you can easily set a rounded rectangle by using the attribute border-radius. However, this attribute is not supported in IE8 and below. In order to achieve adaptive width and height rounded rectangles in older versions of browsers, the following three methods can be used.

1. Use the background image to make rounded corners

Use the background image to make a rounded rectangle with adaptive width and height. First, you need to cut out 4 rounded corner images. Then place the four rounded corner images on the four corners of the rectangle and you're done. This requires a total of 5 p tags, 1 container p and 4 rounded background p. Is that easy to understand?

In terms of specific implementation, some details need to be paid attention to. For a rectangular container p:

The size of the top and bottom padding is set to at least the height of the rounded corners.

position is set to relative positioning.
Place content.
For 4 rounded corner background p:

Set each rounded corner background image respectively.

Absolutely positioned at the four corners of the container rectangle.
You need to set the width and height values ​​to display the background image.
Assume that the width and height of the rounded image are 5px, the specific code is as follows:

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

2. Pure CSS+p to create a rounded rectangle

The principle of this method is to use pixel points to draw arcs to simulate fillets. For the sake of simplicity, here I use an example with a corner radius of 3px, in which the background color of the rounded rectangle is pink and the border of the rectangle is black. The rounded corner in the upper left corner is enlarged as shown in the figure below:

Here, the upper and lower sides of the rectangle need 3 p's with a height of 1px and vertically arranged together to simulate the rounded corners. The specific implementation is as follows:

The first p is the black upper border of the rectangle in the picture above. Because the simulated corner radius is 3px, the left and right margins of the p are set to 3px, and the background color is set to black.

The left and right margins of the second p are set to 2px, the left and right borders are 1px black lines, and the background color is pink.
The left and right margins of the third p are set to 1px, the left and right borders are 1px black lines, and the background color is pink.
The two rounded corners under the rounded rectangle are the above three p's arranged in reverse order.
The p of the rectangular content area only needs to set the left and right borders and background color.
The specific code is as follows

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

Analysis of the advantages and disadvantages of this method:

Does not use background images, reducing the number of HTTP requests.

The later maintenance is good, but as the pixels of the rounded rectangle increase, the meaningless p code will multiply.
The rounded rectangle implemented has limitations.
Only solid color rounded corners can be achieved.

3. Use CSS border to draw a trapezoid to simulate rounded corners

By setting the border attribute, you can get trapezoids and triangles. The effect is as shown below:

When you set a relatively large width value for the four borders of p, you can get four trapezoids, such as the first pattern in the picture above;

On this basis, when you set p After setting the height value of p to 0, you can get a trapezoid and an isosceles triangle, as shown in the second pattern in the picture above;
When the width and height of p are set to 0, and only the top and left sides are set. When you set a border, you can get two right triangles, which is the case with the third pattern in the picture;
On this basis, set the color of one of the borders to transparent, and it will look like the fourth pattern. You get a right triangle as well.
The code is as follows:

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

.box1 {   
 height: 20px;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box2 {   
 height: 0;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box3 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid yellow;   
}   
.box4 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid transparent;   
}

已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：

具体代码如下：

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形，模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>

p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

The above is the detailed content of Share how to make CSS rounded borders other than border-radius. For more information, please follow other related articles on the PHP Chinese website!