How do I use CSS to smooth out the box-shaped interface border?
# Make border outline round, Border-radius
In the past, we used a lot of ways to utilize background images for browser compatibility. However, in recent years, most of the Border-radius properties that make most browsers look round are supported, making it simple to use just cs without having to work with images.

Note that even if you don't have a property border, which is the style of creating borders, it's rounded, so please note. Below is a simple grammar and how to use it.

border-radius: value

When you specify the values in the above way, you can determine how much round they are to be expressed. The value is used by entering pixels or percentages as shown below.
border-radius: 2px;
border-radius: 10px;
// Specifies the value in pixels

bordr-radius: 50%;
// A method using relative figures is also possible

As shown above, pixels (px) units are sometimes used, but you can also specify a relative number using %.


! What is the difference between pixel and percentage value?
For the method using percent, it is not the same as the one using pixels. There's a difference between these two, and the difference is that when you use the units of %, the horizontal length of the rectangle is rounded to the size of the ratio.

When using a typical pixel, the rounded size is applied to the same values as the horizontal and vertical. From the bottom, let's look at various examples and learn more about them.



# border-radius property examplesviewing sources
Below is a code that has been rounded by applying properties to square areas. Please check below.

! Example using pixel value
First, see what happens when you use pixels as a value below.
@ border.html
<div>12</div>

@ border.css
div {
   width: 100px;
   height: 50px;
   border: 1px solid red;
   border-radius: 10px;
}
This code will show you the following:


As you can see, the round edges that we want are made.


! Example using % values
What happens if it's a percentage, not a pixel? Check below.
@ border.html
<div>Percent</div>

@ border.css
div {
  width: 100px;
  height: 50px;
  border-radius: 20%;
}
When you execute the above code, it will appear as follows:

Percent

If you apply a percentage value, it is not always expressed in the same amount, and the curvature is applied differently depending on the width and height values of the application.



# Select only the desired edges of the border to apply
The examples above apply the same round style to all borders. How do you apply different styles to different edges?
.test {
   border-top-left-radius: 3px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 10px;
   // To select and apply the desired edge
}
The above code will appear as follows.


! To apply the border to each line
As shown above, you can use other properties based on location values, but the code is simplified by using one line as shown below. From the starting point, it's the upper, upper, lower, and lower directions.
.test {
  border-radius: 3px 5px 8px 10px;
}

When you run it, it will appear applied as follows:




# On finishingSo here's how we can use the boder-radius in a variety of ways. For older browsers, this is a convenient way to round edges without using images. For example, border-radius is not implemented in Explorer (IE) 8 or earlier, so a different method (also an image) is required.