8

How can I create a div with rounded corners and transparent backgrounds? A bit like twitter does. So that at the edge of the corners you can see the page background and not a black edge.

Yesterday
  • 561
  • 1
  • 15
  • 31
  • 1
    possible duplicate of [What is the best way to create rounded corners using CSS?](http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css) – user229044 Jan 31 '11 at 19:53
  • @Daniel That question is specifically about using JavaScript, and the top answer is a jQuery library. This is not a duplicate of that question. – user229044 Jan 31 '11 at 19:55
  • @meagar Good call - I missed the tags - I thought the OP was looking for any way to do it. comment deleted. – Daniel Jan 31 '11 at 19:59

3 Answers3

9

for a simple Radius, use this CSS:

div{
-moz-border-radius:10px;  /* for Firefox */
-webkit-border-radius:10px; /* for Webkit-Browsers */
border-radius:10px; /* regular */
opacity:0.5; /* Transparent Background 50% */
}

Greez, Chuggi

Chugworth
  • 480
  • 2
  • 5
  • 1
    RGBA is what he's talking about, in reference to twitter. Opacity will make everything in the div transparent to 50%, RGBA will just fade what he wants. – android.nick Apr 03 '11 at 03:16
9

For full control over which elements are transparent and which are not, specify colors in rgba instead of hex:

div{
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  background: #fff; /* fallback for browsers that don't understand rgba */
  border: solid 10px #000; /* fallback for browsers that don't understand rgba */
  background-color: rgba(255,255,255,0.8); /* slighly transparent white */
  border-color: rgba(0,0,0,0.2); /*Very transparent black*/
}

The fourth number within rgba is the level of transparency (alpha channel), 1 represents fully opaque and 0 is fully transparent.

Bas Slagter
  • 9,831
  • 7
  • 47
  • 78
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Last attribute, 'border-color', is right? Or it should be only a rgba color like 'border-color: rgba(0,0,0,0.2)? – Ivan Feb 21 '15 at 10:47
1

Using css3:

#divid {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

You can read more about it here: http://www.css3.info/preview/rounded-border/

Gregg B
  • 13,139
  • 6
  • 34
  • 50