5

I am looking for the meaning of the symbol /. I googled it without anky kind of sucess.

You can find everywhere, but here an example from today :

#identity:before
{
    /* some useless stuffs */
    border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
}

I already saw it with a font-size property.

I am not sure this question belongs to here. Say me, if I have to move it.

Thank you.

UPDATE

Chris B post a link about the case of font-size.

font: 12px/18px

mean :

font-size: 12px;
line-height: 18px;

It is a shorthand. Now, what the point with border-radius ?

Community
  • 1
  • 1
aloisdg
  • 22,270
  • 6
  • 85
  • 105
  • 1
    I was about to say it was for comments, then I saw that sneaky little bastard hiding in the percentages. – Dryden Long Mar 31 '14 at 21:33
  • 2
    possible duplicate of [What does this CSS font shorthand syntax mean?](http://stackoverflow.com/questions/4080265/what-does-this-css-font-shorthand-syntax-mean) – Chris Bier Mar 31 '14 at 21:34
  • @ChrisB I learn something ! But what the point for border-radius ? I will edit my answer. – aloisdg Mar 31 '14 at 21:35

2 Answers2

8

"If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally."

The slash in the code from your post is shorthand and differentiates between the vertical and horizontal radii.

http://www.w3.org/TR/css3-background/#border-radius

From the link above:

border-radius: 4em;

is equivalent to

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

and

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;
Dryden Long
  • 10,072
  • 2
  • 35
  • 47
1

CSS grammar has three types of list elements separators:

  • '/' (slash)
  • ' ' (whitespace)
  • ',' (comma)

So that border-radius above can be written in LISP style as this:

(30% 0% 30% 0%) (75% 0% 75% 0%);

list of two elements where each element is a list of four elements by itself.

Unfortunately CSS grammar is not consistent with priority of this separators. In border-radius property ' ' has higher priority than '/' but in font declaration priorities are different, so this:

font:italic bold 12px/30px Georgia, serif;

gets parsed as this 

font:italic bold (12px 30px) (Georgia serif);
c-smile
  • 26,734
  • 7
  • 59
  • 86