3

Is it possible to create a rectangle with rounded edges without using an image? For example:

Rounded Edges

Thank you.

6
  • You may find this site helpful: border-radius.com
    – Paul
    Aug 28, 2011 at 8:34
  • Used that but didn't make corners rounded. Aug 28, 2011 at 8:46
  • what browser are you using? I doubt it will work in IE. May not work in older versions of some other browsers as well.
    – Paul
    Aug 28, 2011 at 8:48
  • I am using Google Chrome Aug 28, 2011 at 8:51
  • Does not seem like you're actually making an effort yourself. Sorry.
    – Matijs
    Aug 28, 2011 at 9:02

5 Answers 5

12

This is a good tutorial to understand rounded border for any div:

http://www.css3.info/preview/rounded-border/

Or you can round a border of a certain div like this:

#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}

in a nut shell:

You can combine these as you like. -webkit-... will only be recognized by WebKit browsers (Chrome, Safari), -moz-... will only be recognized by Mozilla-based browsers (Firefox.)

EDIT:

You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:first-child td:last-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:last-child { -webkit-border-top-left-radius: 15px; }

Hope this helps.

7
  • I used that but it changed nothing. :\ Aug 28, 2011 at 8:48
  • and html? can you attach screenshot of your result.
    – talha2k
    Aug 28, 2011 at 8:54
  • Ok no need for screenshots. just add -webkit-border-radius: 15px; in css. It will work.
    – talha2k
    Aug 28, 2011 at 8:57
  • It is not working because you are trying to put it on a tr. which is not possible. See my edited answer. I've again edited it for you.
    – talha2k
    Aug 28, 2011 at 9:06
3

Something like this, with your own customizations:

HTML

<div class="outer">
    <div class="top">Settings</div>
    This is some text. It is part of an example of rounded borders in css. It is two lines long by now, I suppose.
</div>

CSS

div.outer{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #333;
    color: #8AF;
    padding: 0px 20px;
}

div.outer .top{
    margin: 0px -20px;
    padding: 0px 20px;
    background-color: #8AF;
    color: #000;
}

JSFiddle Example

1

You can use the css property border-radius.

However it is not supported on older browser.

1

Here are some examples and also browser support info.

border---radius: [ | <%> ] [ | <%> ]?

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
Width:150px;
} 

Real World Example: This should show a grey box with rounded corders in most browsers except IE < 7

HTML

<div id="RoundCorners">

</div>

CSS

#RoundCorners
{
   border-radius: 15px;
   moz-border-radius: 15px; //If using Firefox
   background-color: #333;
}

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).

Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).

Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.

Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).

Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).

4
  • I used that, but it doesn't round the corners. Aug 28, 2011 at 8:44
  • @Duncan Palmer Which browser are you using to test? also, do you want to post your CSS ?
    – Rhys
    Aug 28, 2011 at 8:46
  • Google Chrome and i am using this: #test{ background: #000000; border-radius: 15px; -moz-border-radius: 15px; } Aug 28, 2011 at 8:49
  • @Duncan Palmer I have added another example including the basix HTML.. Hpefully this helps you out. This is testing and definately works. Your example didn't have any H or W.
    – Rhys
    Aug 28, 2011 at 8:54
0

Make a rectangle clip and place a rectangle with thick and round border over it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.