Can I get rounded corners with just CSS and no images involved? I can't seem to find it on Google. I'm using it for a table.
This vendor version of CSS3 will work in Firefox, Safari and Chrome: table{ -moz-border-radius:5px; -webkit-border-radius:5px } Of course IE can't handle modern methods.
Its better to use images, as CSS3 is not supported by IE. Even though everyone hates IE, the majority of users use IE. BTW checkout curvycorners.net. It uses javascript, but its really easy to use.
So he should dumb down his pages just for corners on a bad browser? No way. IE users won't know the difference. Let them have squares.
What if the images are pre-made and made available to you just for the time you spend downloading them (with four corner images each of 1 KB size that is less than 2 mins time). You may want to check out how to do css rounded corners with 4 pre made images here: http://blog.jofftastic.co.uk/airtight_rounded_css_corners.html
None of you guys image solutions will work easily with a table. In fact, it would be difficult. The CSS solution works with tables easier and quicker and cleaner.
very simple fix okay here is my html header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hot Ex leaves the nerd :(</title> <meta http-equiv="Content-Language" content="English" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="This is Emilie, my ex-girlfriend. Yesterday she broke up with me atfer four years in this relationship. As a reason she told me that I wasn't home enough in the last few months and that she feels betrayed. God, I worked my fuckin' ass off for that girl so I could afford to take her at a nice vacation with me, but what did she do? Break up, because she couldn't talk to me could she?? Im so fuckin' irate! And thats the reason why I will now upload her pictures and present them to you, that bitch is going to have a fuckin' bad day!" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <script type="text/JavaScript" src="rounded_corners.inc.js"></script> <script type="text/JavaScript"> window.onload = function() { settings = { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 10 }, br: { radius: 10 }, antiAlias: true, autoPad: true } var myBoxObject = new curvyCorners(settings, "rounded"); myBoxObject.applyCornersToAll(); } function PopWindow() { window.open('ad.htm','ads','width=336,height=280,menubar=no,scrollbars=no,toolbar=no,location=no,directories=no,resizable=no,top=200,left=450'); } </script> </head> HTML: var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1; var isMoz = document.implementation && document.implementation.createDocument; var isSafari = ((navigator.userAgent.toLowerCase().indexOf('safari')!=-1)&&(navigator.userAgent.toLowerCase().indexOf('mac')!=-1))?true:false; function curvyCorners() { if(typeof(arguments[0]) != "object") throw newCurvyError("First parameter of curvyCorners() must be an object."); if(typeof(arguments[1]) != "object" && typeof(arguments[1]) != "string") throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name."); if(typeof(arguments[1]) == "string") { var startIndex = 0; var boxCol = getElementsByClass(arguments[1]);} else { var startIndex = 1; var boxCol = arguments;} var curvyCornersCol = new Array(); for(var i = startIndex, j = boxCol.length; i < j; i++) { if(boxCol[i].tagName.toLowerCase() == "div") { curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]);} } this.objects = curvyCornersCol; this.applyCornersToAll = function() { for(var x = 0, k = this.objects.length; x < k; x++) { this.objects[x].applyCorners();} } } function curvyObject() { this.box = arguments[1]; this.settings = arguments[0]; this.topContainer = null; this.bottomContainer = null; this.masterCorners = new Array(); this.contentDIV = null; var boxHeight = get_style(this.box, "height", "height"); var boxWidth = get_style(this.box, "width", "width"); var borderWidth = get_style(this.box, "borderTopWidth", "border-top-width"); var borderColour = get_style(this.box, "borderTopColor", "border-top-color"); var boxColour = get_style(this.box, "backgroundColor", "background-color"); var backgroundImage = get_style(this.box, "backgroundImage", "background-image"); var boxPosition = get_style(this.box, "position", "position"); var boxPadding = get_style(this.box, "paddingTop", "padding-top"); this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight)); this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth)); this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0)); this.boxColour = format_colour(boxColour); this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1)? boxPadding.slice(0, boxPadding.indexOf("px")) : 0)); this.borderColour = format_colour(borderColour); this.borderString = this.borderWidth + "px" + " solid " + this.borderColour; this.backgroundImage = ((backgroundImage != "none")? backgroundImage : ""); this.boxContent = this.box.innerHTML; if(boxPosition != "absolute") this.box.style.position = "relative"; this.box.style.padding = "0px"; if(isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%"; if(this.settings.autoPad == true && this.boxPadding > 0) this.box.innerHTML = ""; this.applyCorners = function() { for(var t = 0; t < 2; t++) { switch(t) { case 0: if(this.settings.tl || this.settings.tr) { var newMainContainer = document.createElement("DIV"); newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0); newMainContainer.style.height = topMaxRadius + "px"; newMainContainer.style.top = 0 - topMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.topContainer = this.box.appendChild(newMainContainer);} break; case 1: if(this.settings.bl || this.settings.br) { var newMainContainer = document.createElement("DIV"); newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0); newMainContainer.style.height = botMaxRadius + "px"; newMainContainer.style.bottom = 0 - botMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.bottomContainer = this.box.appendChild(newMainContainer);} break;} } if(this.topContainer) this.box.style.borderTopWidth = "0px"; if(this.bottomContainer) this.box.style.borderBottomWidth = "0px"; var corners = ["tr", "tl", "br", "bl"]; for(var i in corners) { var cc = corners[i]; if(!this.settings[cc]) { if(((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null)) { var newCorner = document.createElement("DIV"); newCorner.style.position = "relative"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; if(this.backgroundImage == "") newCorner.style.backgroundColor = this.boxColour; else newCorner.style.backgroundImage = this.backgroundImage; switch(cc) { case "tl": newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.left = -this.borderWidth + "px"; break; case "tr": newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth*2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; newCorner.style.left = this.borderWidth + "px"; break; case "bl": newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth*2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = -this.borderWidth + "px"; newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break; case "br": newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth*2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = this.borderWidth + "px" newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break;} } } else { if(this.masterCorners[this.settings[cc].radius]) { var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);} else { var newCorner = document.createElement("DIV"); newCorner.style.height = this.settings[cc].radius + "px"; newCorner.style.width = this.settings[cc].radius + "px"; newCorner.style.position = "absolute"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth); for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++) { if((intx +1) >= borderRadius) var y1 = -1; else var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1); if(borderRadius != j) { if((intx) >= borderRadius) var y2 = -1; else var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2))); if((intx+1) >= j) var y3 = -1; else var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);} if((intx) >= j) var y4 = -1; else var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2))); if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius); if(borderRadius != j) { for(var inty = (y1 + 1); inty < y2; inty++) { if(this.settings.antiAlias) { if(this.backgroundImage != "") { var borderFract = (pixelFraction(intx, inty, borderRadius) * 100); if(borderFract < 30) { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);} else { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);} } else { var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius)); this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, cc);} } } if(this.settings.antiAlias) { if(y3 >= y2) { if (y2 == -1) y2 = 0; this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0);} } else { if(y3 >= y1) { this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0);} } var outsideColour = this.borderColour;} else { var outsideColour = this.boxColour; var y3 = y1;} if(this.settings.antiAlias) { for(var inty = (y3 + 1); inty < y4; inty++) { this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);} } } this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);} if(cc != "br") { for(var t = 0, k = newCorner.childNodes.length; t < k; t++) { var pixelBar = newCorner.childNodes[t]; var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px"))); var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px"))); var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px"))); if(cc == "tl" || cc == "bl"){ pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px";} if(cc == "tr" || cc == "tl"){ pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px";} switch(cc) { case "tr": pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px"; break; case "tl": pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px"; break; case "bl": pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth) + "px"; break;} } } } if(newCorner) { switch(cc) { case "tl": if(newCorner.style.position == "absolute") newCorner.style.top = "0px"; if(newCorner.style.position == "absolute") newCorner.style.left = "0px"; if(this.topContainer) this.topContainer.appendChild(newCorner); break; case "tr": if(newCorner.style.position == "absolute") newCorner.style.top = "0px"; if(newCorner.style.position == "absolute") newCorner.style.right = "0px"; if(this.topContainer) this.topContainer.appendChild(newCorner); break; case "bl": if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if(newCorner.style.position == "absolute") newCorner.style.left = "0px"; if(this.bottomContainer) this.bottomContainer.appendChild(newCorner); break; case "br": if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if(newCorner.style.position == "absolute") newCorner.style.right = "0px"; if(this.bottomContainer) this.bottomContainer.appendChild(newCorner); break;} } } var radiusDiff = new Array(); radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius) radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius); for(z in radiusDiff) { if(radiusDiff[z]) { var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r"); var newFiller = document.createElement("DIV"); newFiller.style.height = radiusDiff[z] + "px"; newFiller.style.width = this.settings[smallerCornerType].radius+ "px" newFiller.style.position = "absolute"; newFiller.style.fontSize = "1px"; newFiller.style.overflow = "hidden"; newFiller.style.backgroundColor = this.boxColour; switch(smallerCornerType) { case "tl": newFiller.style.bottom = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.topContainer.appendChild(newFiller); break; case "tr": newFiller.style.bottom = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.topContainer.appendChild(newFiller); break; case "bl": newFiller.style.top = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.bottomContainer.appendChild(newFiller); break; case "br": newFiller.style.top = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.bottomContainer.appendChild(newFiller); break;} } var newFillerBar = document.createElement("DIV"); newFillerBar.style.position = "relative"; newFillerBar.style.fontSize = "1px"; newFillerBar.style.overflow = "hidden"; newFillerBar.style.backgroundColor = this.boxColour; newFillerBar.style.backgroundImage = this.backgroundImage; switch(z) { case "t": if(this.topContainer) { if(this.settings.tl.radius && this.settings.tr.radius) { newFillerBar.style.height = topMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px"; newFillerBar.style.borderTop = this.borderString; if(this.backgroundImage != "") newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; this.topContainer.appendChild(newFillerBar);} this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";} break; case "b": if(this.bottomContainer) { if(this.settings.bl.radius && this.settings.br.radius) { newFillerBar.style.height = botMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px"; newFillerBar.style.borderBottom = this.borderString; if(this.backgroundImage != "") newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px"; this.bottomContainer.appendChild(newFillerBar);} } break;} } if(this.settings.autoPad == true && this.boxPadding > 0) { var contentContainer = document.createElement("DIV"); contentContainer.style.position = "relative"; contentContainer.innerHTML = this.boxContent; contentContainer.className = "autoPadDiv"; var topPadding = Math.abs(topMaxRadius - this.boxPadding); var botPadding = Math.abs(botMaxRadius - this.boxPadding); if(topMaxRadius < this.boxPadding) contentContainer.style.paddingTop = topPadding + "px"; if(botMaxRadius < this.boxPadding) contentContainer.style.paddingBottom = botMaxRadius + "px"; contentContainer.style.paddingLeft = this.boxPadding + "px"; contentContainer.style.paddingRight = this.boxPadding + "px"; this.contentDIV = this.box.appendChild(contentContainer);} } this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) { var pixel = document.createElement("DIV"); pixel.style.height = height + "px"; pixel.style.width = "1px"; pixel.style.position = "absolute"; pixel.style.fontSize = "1px"; pixel.style.overflow = "hidden"; var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius); if(image == -1 && this.backgroundImage != "") { pixel.style.backgroundImage = this.backgroundImage; pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";} else { pixel.style.backgroundColor = colour;} if (transAmount != 100) setOpacity(pixel, transAmount); pixel.style.top = inty + "px"; pixel.style.left = intx + "px"; newCorner.appendChild(pixel);} } function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling);} function BlendColour(Col1, Col2, Col1Fraction) { var red1 = parseInt(Col1.substr(1,2),16); var green1 = parseInt(Col1.substr(3,2),16); var blue1 = parseInt(Col1.substr(5,2),16); var red2 = parseInt(Col2.substr(1,2),16); var green2 = parseInt(Col2.substr(3,2),16); var blue2 = parseInt(Col2.substr(5,2),16); if(Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1; var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction))); if(endRed > 255) endRed = 255; if(endRed < 0) endRed = 0; var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction))); if(endGreen > 255) endGreen = 255; if(endGreen < 0) endGreen = 0; var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction))); if(endBlue > 255) endBlue = 255; if(endBlue < 0) endBlue = 0; return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);} function IntToHex(strNum) { base = strNum / 16; rem = strNum % 16; base = base - (rem / 16); baseS = MakeHex(base); remS = MakeHex(rem); return baseS + '' + remS;} function MakeHex(x) { if((x >= 0) && (x <= 9)) { return x;} else { switch(x) { case 10: return "A"; case 11: return "B"; case 12: return "C"; case 13: return "D"; case 14: return "E"; case 15: return "F";} } } function pixelFraction(x, y, r) { var pixelfraction = 0; var xvalues = new Array(1); var yvalues = new Array(1); var point = 0; var whatsides = ""; var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2))); if ((intersect >= y) && (intersect < (y+1))) { whatsides = "Left"; xvalues[point] = 0; yvalues[point] = intersect - y; point = point + 1;} var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2))); if ((intersect >= x) && (intersect < (x+1))) { whatsides = whatsides + "Top"; xvalues[point] = intersect - x; yvalues[point] = 1; point = point + 1;} var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2))); if ((intersect >= y) && (intersect < (y+1))) { whatsides = whatsides + "Right"; xvalues[point] = 1; yvalues[point] = intersect - y; point = point + 1;} var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2))); if ((intersect >= x) && (intersect < (x+1))) { whatsides = whatsides + "Bottom"; xvalues[point] = intersect - x; yvalues[point] = 0;} switch (whatsides) { case "LeftRight": pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2); break; case "TopRight": pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2); break; case "TopBottom": pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2); break; case "LeftBottom": pixelfraction = (yvalues[0]*xvalues[1])/2; break; default: pixelfraction = 1;} return pixelfraction;} function rgb2Hex(rgbColour) { try{ var rgbArray = rgb2Array(rgbColour); var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);} catch(e){ alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");} return hexColour;} function rgb2Array(rgbColour) { var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")")); var rgbArray = rgbValues.split(", "); return rgbArray;} function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; if(isSafari && obj.tagName != "IFRAME") { var rgbArray = rgb2Array(obj.style.backgroundColor); var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";} else if(typeof(obj.style.opacity) != "undefined") { obj.style.opacity = opacity/100;} else if(typeof(obj.style.MozOpacity) != "undefined") { obj.style.MozOpacity = opacity/100;} else if(typeof(obj.style.filter) != "undefined") { obj.style.filter = "alpha(opacity:" + opacity + ")";} else if(typeof(obj.style.KHTMLOpacity) != "undefined") { obj.style.KHTMLOpacity = opacity/100;} } function inArray(array, value) { for(var i = 0; i < array.length; i++){ if (array[i] === value) return i;} return false;} function inArrayKey(array, value) { for(key in array){ if(key === value) return true;} return false;} function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true;} else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r;} else { elm['on' + evType] = fn;} } function removeEvent(obj, evType, fn, useCapture){ if (obj.removeEventListener){ obj.removeEventListener(evType, fn, useCapture); return true;} else if (obj.detachEvent){ var r = obj.detachEvent("on"+evType, fn); return r;} else { alert("Handler could not be removed");} } function format_colour(colour) { var returnColour = "#ffffff"; if(colour != "" && colour != "transparent") { if(colour.substr(0, 3) == "rgb") { returnColour = rgb2Hex(colour);} else if(colour.length == 4) { returnColour = "#" + colour.substring(1, 2) + colour.substring(1, 2) + colour.substring(2, 3) + colour.substring(2, 3) + colour.substring(3, 4) + colour.substring(3, 4);} else { returnColour = colour;} } return returnColour;} function get_style(obj, property, propertyNS) { try { if(obj.currentStyle) { var returnVal = eval("obj.currentStyle." + property);} else { if(isSafari && obj.style.display == "none") { obj.style.display = ""; var wasHidden = true;} var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS); if(isSafari && wasHidden) { obj.style.display = "none";} } } catch(e) { } return returnVal;} function getElementsByClass(searchClass, node, tag) { var classElements = new Array(); if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if(pattern.test(els[i].className)) { classElements[j] = els[i]; j++;} } return classElements;} function newCurvyError(errorMessage) { return new Error("curvyCorners Error:\n" + errorMessage) } Code (markup):
My article on doing it without .js http://battletech.hopto.org/html_tutorials/rounded_css_borders/ Post on these forums on the subject http://forums.digitalpoint.com/showthread.php?t=378667 A contemporary of my older page on the subject http://www.html.it/articoli/nifty/index.html My implementation uses just one class per two corners as opposed to the 'toss a class at everything' other people use. (nesting makes it SO much less code!) Though really, I'd suck it up and just use an image since it's less code and can be cached across pages - and using CSS can often be done using just ONE image file instead of slicing it into pieces - hence my 'eight corners under one roof' technique. http://battletech.hopto.org/html_tutorials/eightcorners/template.html One simple image, nabs all sides with a minimum of extra code, and can even be jiggered to work with transparent corners. (handy with 'close enough' AA so you don't need that alpha png asshattery)
If the radius of corner is below 6px, you can use pure css + 1px divs. But with increase of radius, the corner will look not smooth. See the algorithm for the different radius. http://www.pagecolumn.com/webparts/rounded_corners.htm If you want very smooth round corner without image, normally use javascript with anti-aliased technology. http://www.pagecolumn.com/tool/round_corner_generator.htm
-moz-border-radius-topleft:7px; /* Firefox, etc */ -moz-border-radius-topright:7px; /* Firefox, etc */ -khtml-border-top-right-radius:7px; /* Konqueror, etc */ -khtml-border-top-left-radius:7px; /* Konqueror, etc */ -webkit-border-top-right-radius:7px; /* Safari, Google Chrome, etc */ -webkit-border-top-left-radius:7px; /* Safari, Google Chrome, etc */ -opera-border-top-right-radius:7px; /* Opera */ -opera-border-top-right-radius:7px; /* Opera */ Code (markup): Change the 7 to the number that you want. This don't work in IE
Just simple what i am using on my blog www.schooloftutorials.com On Style.css copy/paste the code written below into your css file. #rnd_container {background: #DFD5B9; margin:1px;} .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;} .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;} .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;} .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #99CC33; border-right:1px solid #99CC33;} .rnd_b1 {margin:0 5px; background:#99CC33;} .rnd_b2 {margin:0 3px; border-width:0 2px;} .rnd_b3 {margin:0 2px;} .rnd_b4 {height:2px; margin:0 1px;} .rnd_content { display:block; border:0 solid #99CC33; border-width:0 1px; padding: 4px; background:#FFFFFF; color:#000000; } Style 1: .imageborder { border:3px solid #008000; } .imageborder:hover { border:3px solid #800000; } Code (markup): On Index.php After the <?php get_header(); ?> paste the following code written below <div id="rnd_container"> <b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b> <div class="rnd_content"> "Your Text Here" </div> <b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b> </div> Code (markup): That's it
If the OP has a boss like mine, he'll be dumbing down everything for IE. Squares may not be allowed. Esp if he lives in a country like mine where 80%+ of users are stuck on Winblows and never heard of Firefux. Luckily Chrome seems to get popular here.
plus, you're missing out some more browsers: .box { -border-radius: 5px; /* when CSS3 gets popular */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari, Chrome, etc. */ -khtml-border-radius: 5px; /* Konqueror */ -ms-border-radius: 5px; /* supposed to work in IE8, but who cares? */ }
On college campuses. You get into the real world... Though that's true most places. Generally the boss sitting there spending the whole day in word and excel is going to tell you where to shove it when you mention FF, Opera, Safari or even Openoffice. Chrome seems to get past that problem since most of the suits have at least heard of google, and it doesn't have the apple is for the art *** department stigma Safari does.
No. ArsTechnica, CNET and ZDNet quoted European stat company IXsomething where they showed 3 or 4 countries with around 50% usage though, now that I type this, I'm wondering if it might be 50% non-IE usage.
or you can use JavaScript: JavaScript ShadedBorder <style type="text/css"> <!-- #shadowed-border { padding: 20px; width: 30%; margin: 20px auto; } #shadowed-border .sb-inner { background:#ccc; } #shadowed-border .sb-border { background:#fff; } #shadowed-border2 { padding: 10px; width: 30%; margin: 10px auto; } #shadowed-border2 .sb-inner { background:#DFE2FF; } #shadowed-border2 .sb-border { background:#FFDC9F; } .plain { padding: 10px; width: 30%; margin: 10px auto; border: thin solid black; } --> </style> Code (markup): <script type="text/javascript"> <!-- // Created by Steffen Rusitschka - http://www.ruzee.com/ // This script downloaded from www.JavaScriptBank.com var RUZEE = window.RUZEE || {}; RUZEE.ShadedBorder = { create: function(opts) { var isie = /msie/i.test(navigator.userAgent) && !window.opera; function sty(el, h) { for(k in h) { if (/ie_/.test(k)) { if (isie) el.style[k.substr(3)]=h[k]; } else el.style[k]=h[k]; } } function crdiv(h) { var el=document.createElement("div"); el.className = "sb-gen"; sty(el, h); return el; } function op(v) { v = v<0 ? 0 : v; v = v>0.99999 ? 0.99999 : v; if (isie) { return " filter:alpha(opacity=" + (v*100) + ");"; } else { return " opacity:" + v + ';'; } } var sr = opts.shadow || 0; var r = opts.corner || 0; var bor = 0; var bow = opts.border || 0; var shadow = sr != 0; var lw = r > sr ? r : sr; var rw = lw; var th = lw; var bh = lw; if (bow > 0) { bor = r; r = r - bow; } var cx = r != 0 && shadow ? Math.round(lw/3) : 0; var cy = cx; var cs = Math.round(cx/2); var iclass = r > 0 ? "sb-inner" : "sb-shadow"; var sclass = "sb-shadow"; var bclass = "sb-border"; var edges = opts.edges || "trlb"; if (!/t/i.test(edges)) th=0; if (!/b/i.test(edges)) bh=0; if (!/l/i.test(edges)) lw=0; if (!/r/i.test(edges)) rw=0; var p = { position:"absolute", left:"0", top:"0", width:lw + "px", height:th + "px", ie_fontSize:"1px", overflow:"hidden" }; var tl = crdiv(p); delete p.left; p.right="0"; p.width=rw + "px"; var tr = crdiv(p); delete p.top; p.bottom="0"; p.height=bh + "px"; var br = crdiv(p); delete p.right; p.left="0"; p.width=lw + "px"; var bl = crdiv(p); var tw = crdiv({ position:"absolute", width:"100%", height:th + "px", ie_fontSize:"1px", top:"0", left:"0", overflow:"hidden" }); var t = crdiv({ position:"relative", height:th + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); tw.appendChild(t); var bw = crdiv({ position:"absolute", left:"0", bottom:"0", width:"100%", height:bh + "px", ie_fontSize:"1px", overflow:"hidden" }); var b = crdiv({ position:"relative", height:bh + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); bw.appendChild(b); var mw = crdiv({ position:"absolute", top:(-bh)+"px", left:"0", width:"100%", height:"100%", overflow:"hidden", ie_fontSize:"1px" }); function corner(el,t,l) { var w = l ? lw : rw; var h = t ? th : bh; var s = t ? cs : -cs; var dsb = []; var dsi = []; var dss = []; var xp=0; var xd=1; if (l) { xp=w-1; xd=-1; } for (var x=0; x<w; ++x) { var yp=0; var yd=1; if (t) { yp=h-1; yd=-1; } for (var y=0; y<h; ++y) { var div = '<div style="position:absolute; top:' + yp + 'px; left:' + xp + 'px; ' + 'width:1px; height:1px; overflow:hidden;'; var xc = x - cx; var yc = y - cy - s; var d = Math.sqrt(xc*xc+yc*yc); var doShadow = false; if (r > 0) { // draw border if (xc < 0 && yc < bor && yc >= r || yc < 0 && xc < bor && xc >= r) { dsb.push(div + '" class="' + bclass + '"></div>'); } else if (d<bor && d>=r-1 && xc>=0 && yc>=0) { var dd = div; if (d>=bor-1) { dd += op(bor-d); doShadow = true; } dsb.push(dd + '" class="' + bclass + '"></div>'); } // draw inner var dd = div + ' z-index:2;'; if (xc < 0 && yc < r || yc < 0 && xc < r) { dsi.push(dd + '" class="' + iclass + '"></div>'); } else if (d<r && xc>=0 && yc>=0) { if (d>=r-1) { dd += op(r-d); doShadow = true; } dsi.push(dd + '" class="' + iclass + '"></div>'); } else doShadow = true; } else doShadow = true; // draw shadow if (sr > 0 && doShadow) { d = Math.sqrt(x*x+y*y); if (d<sr) { dss.push(div + ' z-index:0; ' + op(1-(d/sr)) + '" class="' + sclass + '"></div>'); } } yp += yd; } xp += xd; } el.innerHTML = dss.concat(dsb.concat(dsi)).join(''); } function mid(mw) { var ds = []; ds.push('<div style="position:relative; top:' + (th+bh) + 'px;' + ' height:10000px; margin-left:' + (lw-r-cx) + 'px;' + ' margin-right:' + (rw-r-cx) + 'px; overflow:hidden;"' + ' class="' + iclass + '"></div>'); var dd = '<div style="position:absolute; width:1px;' + ' top:' + (th+bh) + 'px; height:10000px;'; for (var x=0; x<lw-r-cx; ++x) { ds.push(dd + ' left:' + x + 'px;' + op((x+1.0)/lw) + '" class="' + sclass + '"></div>'); } for (var x=0; x<rw-r-cx; ++x) { ds.push(dd + ' right:' + x + 'px;' + op((x+1.0)/rw) + '" class="' + sclass + '"></div>'); } if (bow > 0) { var su = ' width:' + bow + 'px;' + '" class="' + bclass + '"></div>'; ds.push(dd + ' left:' + (lw-bor-cx) + 'px;' + su); ds.push(dd + ' right:' + (rw-bor-cx) + 'px;' + su); } mw.innerHTML = ds.join(''); } function tb(el, t) { var ds = []; var h = t ? th : bh; var dd = '<div style="height:1px; overflow:hidden; position:absolute;' + ' width:100%; left:0px; '; var s = t ? cs : -cs; for (var y=0; y<h-s-cy-r; ++y) { ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' + op((y+1)*1.0/h) + '" class="' + sclass + '"></div>'); } if (y >= bow) { ds.push(dd + (t ? 'top:' : 'bottom:') + (y - bow) + 'px;' + ' height:' + bow + 'px;" class="' + bclass + '"></div>'); } ds.push(dd + (t ? 'top:' : 'bottom:') + y + 'px;' + ' height:' + (r+cy+s) + 'px;" class="' + iclass + '"></div>'); el.innerHTML = ds.join(''); } corner(tl, true, true); corner(tr, true, false); corner(bl, false, true); corner(br, false, false); mid(mw); tb(t, true); tb(b, false); return { render: function(el) { if (typeof el == 'string') el = document.getElementById(el); if (el.length != undefined) { for (var i=0; i<el.length; ++i) this.render(el[i]); return; } // remove generated children var node = el.firstChild; while (node) { var nextNode = node.nextSibling; if (node.nodeType == 1 && node.className == 'sb-gen') el.removeChild(node); node = nextNode; } var iel = el.firstChild; var twc = tw.cloneNode(true); var mwc = mw.cloneNode(true); var bwc = bw.cloneNode(true); el.insertBefore(tl.cloneNode(true), iel); el.insertBefore(tr.cloneNode(true), iel); el.insertBefore(bl.cloneNode(true), iel); el.insertBefore(br.cloneNode(true), iel); el.insertBefore(twc, iel); el.insertBefore(mwc, iel); el.insertBefore(bwc, iel); if (isie) { function resize() { twc.style.width = bwc.style.width = mwc.style.width = el.offsetWidth + "px"; mwc.firstChild.style.height = el.offsetHeight + "px"; } el.onresize=resize; resize(); } } }; } } // add our styles to the document document.write( '<style type="text/css">' + '.sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }' + '* html .sb, * html .sb *, * html .sbi, * html .sbi * { height:1%; }' + '.sbi { display:inline-block; }' + '.sb-inner { background:#ddd; }' + '.sb-shadow { background:#000; }' + '.sb-border { background:#bbb; }' + '</style>' ); // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { border.render('shadowed-border'); border.render('shadowed-border2'); }); //--> </script> Code (markup): <div id="shadowed-border" class="sb"> <p>Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p> </div> <div id="shadowed-border2" class="sb"> <p>Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p> </div> <div class="plain"> <p> <em>Note: This is plain, without the script.</em> Lorem ipsum dolor sit amet, consecte adipiscing elit.</p> </div> <script type="text/javascript"> <!-- var border = RUZEE.ShadedBorder.create({ corner: 8, shadow: 16, border: 2 }); //--> </script> HTML: