can anyone help me change the shape of my bgcolor more like a rounded not a rectangular shape...I'm just not that expert in css can anyone help me please.
Have you tried with
table { border-collapse: separate; }
td{
border-radius : 4px;
}
You're looking for a CSS property called border-radius
A very thorough walkthrough can be found at http://css-tricks.com/almanac/properties/b/border-radius/
Example:
table td {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 4px;
/* Firefox 1-3.6 */
-moz-border-radius: 4px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 4px;
}
Add these to the div that you want rounded for full cross browser compatibility. Obviously you can change the values. The higher the value the more bend in the curve.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Related
Is there a cross browser CSS attribute for curved corners on HTML tables?
Something like:
border-radius: 10px;
Every example I've found online resembles the follwoing:
-moz-border-radius: 5px !important;
Which I don't think is cross browser...
TRY THIS>>>>
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
And this website really helps you in this situation: http://css-tricks.com/almanac/properties/b/border-radius/
I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:
border-radius: 4px;
As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!
Try adding some of the following:
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
Be sure that these items are in the correct css class you are trying to apply to the form element.
I recommend you to define all border properties. Here is an example;
input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}
Here is a working Live Demo, running smooth in my IE9.
Note: Here is a list of browsers supporting CSS3 and others will not.
YOU have a website for create border-radius css code
border-radius : 4px; // for new ie, opera, chrome, firefox
is a new W3C specification for new browser,
if you can use border radius for old browser, you can use
-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px; // for old firefox
-o-border-radius : 4px; // for old opera version
for old ie version, you want to use CSS3PIE.
I am beginner coder in web design so I have a fairly amateur question to ask. I have created a box of text but I don't know how to make the edges round rather than rectangular. I know that CSS functions on rectangular borders. If possible, I would also like to add a slight shadow beneath the box, I'm not sure how to implement this also. Here is my code specifically for the box section:
#wrapper{
border: solid 1px #eeeeee;
}
"#wrapper" refers to a piece of php code in another document. Thank you.
Using border-radius and box-shadow.
#wrapper {
border: solid 1px #eee;
border-radius:10px; /* round corners */
box-shadow:0px 3px 5px 5px #000; /* add shadow */
}
Here are the parameters for each...
border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)
You may wish to prefix your CSS3 properties with -webkit and -moz to increase compatibility with older browsers.
#wrapper {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
check this out!
For browsers which do not support border-radius, you can use roundies.js.
Is it possible to create a rectangle with rounded edges without using an image? For example:
Thank you.
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.
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
You can use the css property border-radius.
However it is not supported on older browser.
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).
Make a rectangle clip and place a rectangle with thick and round border over it.
How to create a rounded corner background box using CSS?
Use this css:
.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
And then simply use the class in your HTML like this
<div class="box_round" style="background-color:red">This is a test</div>
I added the background-color:red - just for test puporposes so that you can see the rounded corenrs.
HTH
This is only supported in CSS 3.
Take a look at the CSS3 PIE project. It may help you with the problems related to CSS3 on old IE versions.