What does the "/" bar on the border-Radius mean?

Asked

Viewed 203 times

9

In CSS, we have the attribute border-radius.

Generally the use of the following forms:

border-radius:10px;

border-radius:10px 20px 20px 10px;

But I came across the following code one of these days and to this day I do not understand what it serves in practice.

 div {
   border-radius: 100px/55px;
   background-color:#333;
   height:100px;
}
<div></div>

What does this bar in the value of border-radius?

css

  • But this warps the shapes in a totally different way. So how does it work?

  • @Andrébaill, but he doesn’t generate equal borders for the four sides, right?

  • 2

    They gave +1 their comment, but it doesn’t seem to be @Andrébaill. I figured it wasn’t really, because the sides don’t look the same. See my example with snippet in the question

2 answers

9


The bar serves to specify two different radii for the curvature.

border-radius: 40px / 20px;
   horizontal --^      ^-- vertical

representacao visual

The same syntax can be used to specify the four corners.

Note the difference for Chrome:

#element {
  border-radius: 80px 70px 60px 50px / 30px 20px 10px 5px;

  background-color:blue;
  width:200px;
  height:100px;
}
<div id="element">
</div>

This avoids having to write everything separately:

#element {
  -webkit-border-top-left-radius: 80px 30px;
  -webkit-border-top-right-radius: 70px 20px;
  -webkit-border-bottom-right-radius: 60px 10px;
  -webkit-border-bottom-left-radius: 50px 5px;

  border-top-left-radius: 80px 30px;
  border-top-right-radius: 70px 20px;
  border-bottom-right-radius: 60px 10px;
  border-bottom-left-radius: 50px 5px;

  background-color:blue;
  width:200px;
  height:100px;
}
<div id="element">
</div>

To MDN documents these properties well. The top image of the answer came from Sitepoint, which has an article talking about.

  • So it has nothing to do with the "division" I was told in the comments?

  • Nothing. It is horizontal and vertical

  • +1. Thank you for having a reply on this in English ;)

  • 1

    Tested on IE11 and Opera (Chromium). I appreciate comments from users of other browsers.

4

The "/" sign on border-Radius works as follows: declares the values of the horizontal axis in a clockwise direction, and then the values of the vertical axis, also separated by a bar:

border-Radius: 10px 20px 5px 20px / 5px 5px 20px 10px;

In this example it would look like this:

#border{
  width:300px;
  height:100px;
  background:#000;
 border-radius: 10px 20px 5px 20px / 5px 5px 20px 10px;
}
<div id="border">
  </div>

It is also possible to use the properties:

border-radius-topleft
border-radius-topright
border-radius-bottomright
border-radius-bottomleft

Which are self-explanatory, define edges in specific locations of the div or whatever you’re styling.

This site brings an article interesting about edges.

  • 1

    +1. I didn’t know you could use / multi-attribute

  • There’s one more way to do it, I’ll edit my answer.

  • I edited my reply with more information about border.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.