Today I try to do a simple and nice popup in CSS without image.
So what I really want to do ?

Simple no ? Unfortunatly not.
One, you need to do the border opacity. For that one thing : If you have an opacity in one element, all its child have the same opacity (an opacity of 1 in the child is the opacity of the parent, an opacity of 0.5 in the child is 0.5*opacity of the parents).
So, I do that with 2 div in the same parents :
<div id= »parents »>
<div id= »child_border »>
</div>
<div id= »child_content »>
</div>
</div>
After that, I fix the opacity of child_border at 0.5 and I put it in center of the screen and x pixel from top. For the child_content I add 10px margin, so in reality I add the same margin-left than child_border plus 10px and I remove 20px from the width. And for the top, just add 10px to top.
So with thatm you have the basse. You have just to add the border radius : for webkit : -webkit-border-radius:10px; For Firefox : -moz-border-radius:10px; And for IE … Nothing for the moment. But you can add the standard border-radius:10px;
For IE opacity is not the same than webkit based browser (Safari/Chrome for example) or Gecko based (Firefox for example), it’s filter:alpha(opacity=50) for an opacity of 0.5.