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/
Related
Hey i was using google chrome to write html, css, JS. CSS frame work i will use Bootstrap.
so i was tested on Chrome my code design how i am expect it works perfect and fine, when it comes to another browsers like Firefox and Opera, Internet Explorer, Safari it was not much expectedly work.
Like Box shadow and linear gradient some other.
i saw some CSS have -webkit, -o, -moz etc...
What are those means? and how i can learn them?
Kindly please tell how i can able to target css for particular browser like Opera and Firefox and safari.
-moz #media(min-width: 320px) and (max-width: 767px) {
/*
Here i would like to target only firefox
*/
}
Some css properties are named depending on which browser is being used so we add what is called a prefix so its compatible with all of them. Let's see box shadow:
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
There are autoprefixers also!
This question already has answers here:
Remove Default round border of <select> element in Mac OS Browser:Chrome
(4 answers)
Closed 6 years ago.
I have a select box which have a CSS property:
border: 1px;
This works well at Chrome but I have a problem with Safari. It is not fit to its container:
When I set CSS to:
border: 0px;
Problem is fixed:
However when border is set to 0 border totally disappears at Chrome.
How can I fix that problem? (setting that property only for Safari or any other ways).
This post shows how you can target different browsers:
-webkit-border-radius: 0; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 0; /* Firefox 1-3.6 */
border-radius: 0; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
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;
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.