Border Radius Generator

Border radius generator is used to create rounded corners. Any corner of the box in the preview can be created with the adjustment buttons. Even border color and style can be adjusted depending on your wish.

You can easily apply your HTML pages by copying the CSS code after you have obtained the desired format.

What is border radius?

Border radius is the CSS property used to round the corners of the applied element. This property, which comes with CSS3, is currently supported by all current web browsers. Microsoft has supported this feature since version 9 of Internet Explorer. Border radius aims to create easily rounded angular views for web developers.

Usage of border radius

border-radius: top-left | top-right | bottom-right | bottom-left (length / percent)

Border radius property takes 4 parameters (4 corners). Below are examples of different uses of the border-radius feature. A length value (for example, 30px) can be given for the border radius, or a percentage value (for example, 10%).

Create rounded corners with border radius generator

Rounded corners are one of the most preferred methods of web designers. In this article we will see how to create rounded boxes.

The border-radius property comes with CSS3, and it works for creating rounded corners in HTML elements. It was quite difficult to do this before CSS3. To implement such designs, it was necessary to take advantage of the CSS background-image feature of the img object. This feature is very important because the border-radius feature saves web developers from many troubles.

Example one: for border-radius: 20px use

div {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

border radius

Here border-radius: 20px we provide all corners using rounding.

Example two:

div {
  border-top-left-radius: 30px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 0px;
}

Although not widely used, in some cases you may need a usage like the one above. We made it possible to individually round each corner here.

Example three: border-radius: top left | top right | bottom right | bottom left

div {
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}

It is one of the most common methods. It’s very easy to use.

Example four: creating a circle with css

div {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

In this way you can circle boxes with equal edge lengths.