CSS: interesting border-radius
What can be done using CSS properties
border-radius ? The author of the material, the translation of which we publish, says that more than it seems at first glance. In particular, we are talking about the fact that the angles of the elements, rounded with the help of this property, can have a very interesting shape.
We suggest to talk about the intricacies of using
Frontend Conference Zurich , Rachel Andrew made 3r3335. Report 3–3–3269. about the possibilities of technology CSS Grid. At the end of the speech, she said something about old CSS properties and her words hooked me. Namely, it sounded like this: “The image was made round exclusively using the well-maintained property 3r-3235. border-radius . Keep in mind that old CSS still exists and can still be useful. You don't have to always use something completely new to create any effects. ”
Some time after this speech, I had the idea that the circle is only a small part of what can be done with the help of 3r-3235. border-radius . Fascinated by this idea, I decided how to deal with this property.
Mastering the border-radius 3r33232.
3r3148. ▍The only value is 3r3151.
Let's start with the basics. I hope you are not bored by this example. You may be familiar with CSS, and indeed with the property
border-radius - also. It has existed for quite some time, and they are used mainly for indicating the only value. It looks like this:
border-radius: 1em . Perhaps this was one of the most discussed features of CSS3 in 201? when was the designer’s best friend. css3please.com .
When using a single value for
border-radius the corners of the element are rounded in accordance with this value.
The rounding of all corners of the square in accordance with the single value of the border-radius
As can be seen from the above example, you can set fixed values not only by specifying certain units of measurement after the numbers, like 3r-3235. px ,
em but also a percent sign. This is usually used to create circles on the basis of squares, when
border-radius set at 50%. The percentage value is based on the width and height of the element. Therefore, when it is applied to rectangles, the resulting angles will not be symmetrical. Here is an example showing the difference between the properties of
border-radius: 110px and
border-radius: 30% applied to a rectangle.
Rounded rectangle corners
Notice that the corners of the right rectangle are not symmetrical, and remember this. We need it a little later.
3r3148. ▍Four separate values 3r3151.
When using more than one value
border-radius , you adjust the parameters for each angle, starting at the top left and moving clockwise. Here, again, you can use percentage values. They can also be mixed with fixed values.
Setting the parameters for the four corners of the element
3r3148. ОсEight values separated by slashes 3r3151.
I think many of you have already tried everything we talked about above. Now it’s time for some really interesting experiments. What happens if the values are separated by a slash and you can specify up to eight such values? First, take a look at Specification 3r33269. . It tells us that if the values are set before and after the slash, then the values before the slash indicate the horizontal radius, and the values after the vertical. If there is no slash, then both radii will be the same.
So, the values before the slash are responsible for the horizontal distances, and the values after the slash are for the vertical ones. All this is good, but then the logical question arises: "What is it all about?". Remember the percentage of rounding values for rectangular shapes? Different absolute values were used for vertical and horizontal distances, and asymmetrically rounded corners were present. It is this effect that can be achieved by using a slash when setting 3r-3235. border-radius .
Let's compare the effects that give the following settings: 3r33232. border-radius: 4em 8em and
border-radius: 4em /8em . The results are very different.
The symmetric corners of the left element are a quarter of a circle, and the asymmetric corners of the left element are parts of the ellipse 3r-3249.
To be honest, the figures obtained as a result of applying the above settings look weird. However, do not forget that the circles are created using the following parameters: 3r33232. border-radius: 50% . The circle is obtained due to the fact that two values that specify one side are added up and 100% are obtained (50% + 50% = 100%) and there are no straight lines from the original square. If you speculate in the same spirit about the eight values used in setting the property 3r323535. border-radius , it turns out that they can be used to describe a figure that is similar to a guitar pick or a cell of a living organism.
The figure is the result of applying 8 values, separated by a slash 3r3323249.
Four overlapping ellipses forming a figure
It took me some time to get used to it. Sometimes all these designs can be difficult to comprehend. If you are attracted to complex form elements customizable using
border-radius, can use this a small tool.
Now that you are aware of that when setting up
border-radius you can use 8 values, then you, if you tried the above tool, can feel a slight disappointment, as it does not allow you to control each value independently. If so, then here is , especially for you, its version that supports independent adjustment of all eight values. Before you use it - remember one conversation from the movie "Ghostbusters" of 1984: 3r-3265.
- Do not cross threads.
- And that will be bad.
The fact is that if you move the manipulators so that they intersect on one side of the figure, it will begin to behave Let's just say that it will begin to behave unpredictably. What can I say - see yourself. In the end, it will not lead to a universal catastrophe, but in doing so, remember that we warned you.
Dear readers! Do you use the border-radius CSS property?
It may be interesting
RFP response software
RFP response software