How to create a CSS fillet border outside of Border-radius

Using the CSS3 Border-radius property to make rounded borders is quite handy, but the browser compatibility problem is not too good to deal with, here we will summarize the Border-radius outside the CSS round border production method.

CSS3 's Border-radius
Using P+CSS to generate rounded border, in many cases will be used, the current p+css rounded border, one is the use of CSS3, one is to use the layout of the simulation of the fillet.
First of all, the use of CSS3, the premise is that your browser must support CSS3,FIREFOX3 is supported, I see a lot of website fillet is also the use of CSS3 directly generated, nothing is IE still show right angle, let ie stubborn go.

With CSS3, you can specify that 4 corners are rounded, or that a corner is a rounded corner, and 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" ><p id= "indie" >

Do not use Border-radius to achieve rounded corners
CSS3, the use of attribute Border-radius can easily set the rounded rectangle, but in the IE8 and the following versions do not support this property, in order to achieve a wide-height adaptive rounded rectangle in the old version of the browser, the following three methods can be used.

1. Use a background image to make fillets

Using the background image to create a wide, highly adaptive rounded rectangle, first need to cut out 4 rounded pictures, and then put 4 rounded pictures on the four corners of the rectangle is done, this altogether requires 5 p tags, 1 containers p and 4 fillet background p. is not very well understood.

Specific implementations require attention to some details. For rectangular container p:

The size of the top and bottom padding is set at least to the height of the rounded corners.
The position is set to relative positioning.
Place content.
For 4 rounded corners background p:

Set each rounded background picture separately.
Absolutely positioned at Four corners of the container rectangle.
You need to set the width height value to display the background picture.
Assume that the width of the rounded picture is 5px, the 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 making rounded rectangles

The principle of this method is to use the pixel points to draw an arc to simulate the fillet. For simplicity, here I use the fillet radius of the 3px example, where the background color of the rounded rectangle is pink and the rectangle's border is black. The upper-left corner of the fillet zooms in as shown:

Here the rectangle needs 3 height of 1px, vertical Luo together p to simulate the fillet. The specific implementation is as follows:

The first p is the black upper border of the rectangle above, because the radius of the simulated fillet is 3px, so 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 margin of the third p is set to 1px, the left and right border is 1px black line, the background color is pink.
The two rounded corners below the rounded rectangle are the above three P-reverse order.
The p in the rectangular content area only needs to set the left and right border 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;   }

Advantages and disadvantages of this method:

Reduces the number of HTTP requests without using a background picture.
The later maintenance is good, but the rounded rectangle pixels increase, the meaningless P code will increase exponentially.
The rounded rectangles implemented have limitations.
Only solid color fillets can be achieved.

3. Use CSS border to draw a trapezoidal analog fillet

By setting the Border property, you can get the trapezoid and triangle, as shown in the effect:

When a large width value is set for the four borders of P, four trapezoid can be obtained, as in the first pattern;
On this basis, when the height value of p is set to 0, the trapezoid and isosceles triangle can be obtained, as in the second pattern;
When the width and height of p are set to 0, and only set the top and left two borders, you can get two right triangle, the third pattern in the picture is this case;
On this basis, the color of one of the borders is set to transparent, can be like a fourth pattern to get a right triangle.
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;   }

Already know how to draw the trapezoid through the border, then how to use the trapezoid to simulate the rounded rectangle? It is simple to get a rounded rectangle by placing a trapezoid on top and bottom of the rectangle. The principle is to use the trapezoid of the left and right two hypotenuse to simulate the fillet, directly on:

The specific code is as follows:

<p class= "wrapper" >    <p class= "Top" ></p> <p class= "Content" >     <p> use border to draw a trapezoid, Analog fillet </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;   }