CODEWITHSUNDEEP
css
aloisdg
aloisdg

Reputation: 23551

What is the meaning of the symbol '/'?

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 ?

Upvotes: 5

Views: 831

Answers (2)

c-smile
c-smile

Reputation: 27480

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);

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10190

"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;

Upvotes: 8

Related Questions