px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
Radius Unit
px

adds

Generated CSS

.border {
border-radius: 5px;
border-style: solid;
border-color: #ee6c4d;
border-width: 3px;
}

FAQs about Border Radius Generator

Let´s answer the most important FAQs (Frequently asked questions) about the CSS attribute border-radius.

Do you have a question about the CSS border radius? We might have the answer here:

Use the CSS-Property border-radius, for example 

.element {
border-radius: 5px;
}

If you need to customize it, try out our Border Radius Generator

You can set 1, 4 or 8 values. One single border radius value applies the same number to all 4 corners of the element.

If you want to customize each of your corners individually, you should usually use 4 values.

On rare occasions you even need to customize your border-radius further and therefore you can use 8 values.

The easiest way to try this out by yourself with own CSS code. If you want to save time and avoid coding, please visit our Border Radius Generator.

Apply a border radius of 50% to the generator and that´s it!

img {
    border-radius: 50%;
    border-style: solid;
    border-color: #ee6c4d;
    border-width: 3px;
    height: 100px;
    width: 100px;
}

 

Need help? We made a tool to create a circle with border-radius the easy way:
Visit our Border Radius Generator and click on "Radius Unit" to 
switch to the percentage (%) unit. That´s all you need to do!

You can use pixels or percent - depending on how your oval should look like.

Version with percent:

img {
    border-radius: 50%;
    border-style: solid;
    border-color: #ee6c4d;
    border-width: 3px;
    height: 100px;
    width: 200px;
}

 

Version with pixels:

img {
    border-radius: 50px;
    border-style: solid;
    border-color: #ee6c4d;
    border-width: 3px;
    height: 100px;
    width: 200px;
}

 

Just play around with the pixel values as much as you want. You will notice that the oval does not change anymore after a certain point. Smaller values however make it more like a rectangle.

Need help? We made a tool to create a circle with border-radius the easy way:
Visit our Border Radius Generator and click on "Radius Unit" to 
switch to the percentage (%) unit. That´s all you need to do!

Yes, you can! Simply apply the CSS-Code border-radius: 50%; on the image.

If your image is a square, this code will make your image a circle. Otherwise it will look like an oval.

Tutorial about border-property in CSS

Border Overview: All 4 properties

Border-Radius, Border-Width, Border-Style & Border & Color

In order to achieve the look we are going for with our borders we have to know which properties exist and how we use them. In our generator we are offering 4 different properties to customize however you want to, let's have a closer look how they work:

  • border-radius
  • border-width
  • border-style
  • border-color

The first three of them follow the same schema, we can set one, two, three or four values as seen in the example bellow:

border-width: 2px;

A single value sets all four borders.

border-width: 2px 4px;

The first value sets top and bottom, the second value sets left and right.

border-width: 2px 4px 6px;

The first value sets top, the second left and right and the last on bottom.

border-width: 2px 4px 6px 8px;

Here we are starting from top again and then go clockwise. This way the order of values is top, right, bottom, left.

border-width

As already seen before we can set 1-4 values for our border width to achive different looks. One important thing to note is that we are not tied to be using px as a unit. Instead we also use other units such as rem, em or pt. If the value should be calculated we can also use the CSS calc() function. In case we only want to only set one site we can address this specific value.
The attributes are the following:

  • border-top-width: (value)(unit);
  • border-right-width: (value)(unit);
  • border-bottom-width: (value)(unit);
  • border-left-width: (value)(unit);

border-radius

For border-radius we can once again set between one and four values. With the correct syntax even eight are possible :] There is one thing to note tho. Since we are styling our borders we don't have values for top, right, bottom and left. That means that the the order of the four values has to mean something else. Now we are starting with top-left and then go clockwise again. In this case we can use px, rem, em, pt, % and calc().
From that we get the following values:

  • border-top-left-radius: (value)(unit);
  • border-top-right-radius: (value)(unit);
  • border-bottom-right-radius: (value)(unit);
  • border-bottom-left-radius: (value)(unit);

border-style

This property sets the style of all sides of the given element. In most cases we want to set the same value for all four sides. It is however possible to give each side a different value by adding multiple values after each other.
In total we have 10 values to choose from:

border-style: solid;

Probably the most used value. It displays a single line in the complete border area.

border-style: dotted;

The border consists of many small dots. It depends on the browser how the dots look like exactly. The developer does can not control this.

border-style: dashed;

Behaves similar as dotted. In this case the border consists of many rectangles.

border-style: double;

Shows two lines seperated with a transparent area.

border-style: groove;

The opposit of ridge. The border has a carved appearance.

border-style: ridge;

The opposit of groove. The border has a carved appearance.

border-style: inset;

The opposit of outset. Looks like the border has a shadow which can be used to create a 3D effect.

border-style: outset;

The opposit of inset. Looks like the border has a shadow which can be used to create a 3D effect.

border-style: none;

Element removes the border entirely.

border-color

Last but not least we want to set a color. We can do this by using HEX, RGB(A) or HLS(A) values to one of the following properties:

  • border-color: (value)
  • border-top-color: (value)
  • border-right-color: (value)
  • border-bottom-color: (value)
  • border-left-color: (value)

For the single property we can again decide if we want to use one to four different values going clockwise: top, right, bottom and left.