CSS3 Rounded corner content boxes

  • 1
  • Idea
  • Updated 4 years ago
Many of you may already now this but in case you don't.
Here is a code for round corner content boxes for your website.
It currently works in Firefox 3.6.4 and Safari 5 (they may work in earlier versions but these are what I use.)

So here's the code
<div style="border: 0px ; width: 100%; height: 211px;-moz-border-radius: 5px;
-webkit-border-radius: 5px; background-color:#cccccc ;">Enter your text here.</div>

The width is 100% which means it will stretch and shrink depending on your columns.
Its height,width,color and corner radius can be edited by changing the values.

Enjoy these easy round corner content boxes.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
  • round

Posted 8 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Thanks John, This looks great.
Photo of Chris

Chris

  • 33 Posts
  • 0 Reply Likes
Is it possible to apply a background gradient to your round corner text box code?

Also, the text in the box appears tight to the edge of the box, can you advise as to how to apply spacing so the text moves away from the edges of the text box please?

Thanks.

Chris
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hi Chris,

Background gradient is possible but will require me to dig through my files to find it as i cannot remember how it is done at this present moment.

As for applying spacing try the following code:
<!--

<div style="border: 0px ; width: 100%; height: 211px;-moz-border-radius: 5px;
-webkit-border-radius: 5px; background-color:#cccccc ; padding: 15px ;">Enter your text here.</div>

-->
If this doesn't work please let me know and i will get back to you asap.

Hope this helps

John
Photo of Adam Moore

Adam Moore

  • 2 Posts
  • 0 Reply Likes
It's very good! But, you should use as many vendor prefixes as possible for border-radius! Here is simple example: box with rounded corners in CSS3. Also, do not forget about older version of IE, for them you can use PIE.