What are the default values of the border in this case?

This is the code I’m working with:

.cat-left-eye {
  position: absolute;
  top: 54px;
  left: 39px;
  border-radius: 60%;
  width: 30px;
  height: 40px;
  background-color: #000;
}

Every time I’ve used the border-radius property before I’ve given the element a border beforehand, so my question is how does it work in this case? Does it give the element a border automatically, and if so what are the default values of this border?

Hi there. The default value of a border when using border-radius depends on whether a border is explicitly set. If no border is defined, there will be no visible effect unless the element has a background color or other styles that highlight the rounded corners. By default, the border is set to medium none currentColor, meaning it has a medium width (typically 3px, but varies by browser), no visible style, and a color that matches the text color. To make border-radius noticeable, a visible border needs to be added using properties like border: 2px solid black.

1 Like