<p>What is the best way to create fluid width/height rounded corners with jQuery?</p>

<hr>

<p>That plugin doesn't keep the height the same.  I have a 10px high div that I want to round the corners on, when I use that script it adds about 10px onto whats there.</p>

[{'answer_id': 35510, 'author': 'Martin Clarke', 'author_id': 2422, 'author_profile': 'https://Stackoverflow.com/users/2422', 'pm_score': 4, 'selected': False, 'text': '<pre><code>$(this).corner();\n</code></pre>\n\n<p>See: <a href="http://malsup.com/jquery/corner" rel="nofollow noreferrer">malsup.com/jquery/corner</a> and <a href="http://github.com/malsup/corner" rel="nofollow noreferrer">github repository for future ref</a></p>\n'}, {'answer_id': 35609, 'author': 'DevelopingChris', 'author_id': 1220, 'author_profile': 'https://Stackoverflow.com/users/1220', 'pm_score': 4, 'selected': True, 'text': '<p>I use: <a href="https://code.google.com/p/jquery-roundcorners-canvas/downloads/list" rel="nofollow noreferrer">Jquery-roundcorners-canvas</a></p>\n\n<p>it handles borders, and keeps things the same size, in fact you have to pad in a bit to keep from having letters live in the crease. Its pretty fast, unless you are on ie 6.\nSame pretty syntax of the other corner packs, but just prettier in general.</p>\n\n<p>Edited to add new link for <a href="https://code.google.com/p/jquery-roundcorners-canvas/downloads/list" rel="nofollow noreferrer">jQuery Roundcorners Canvas</a></p>\n'}, {'answer_id': 676396, 'author': 'Keyslinger', 'author_id': 80857, 'author_profile': 'https://Stackoverflow.com/users/80857', 'pm_score': 3, 'selected': False, 'text': '<p>The way the jQuery UI Theming API accomplishes this in Firefox is with "<a href="http://docs.jquery.com/UI/Theming/API#Corner_Radius_helpers" rel="nofollow noreferrer">Corner Radius Helpers</a>".</p>\n\n<p>Here\'s what they look like in the CSS that was bundled in my copy of the UI:</p>\n\n<pre><code>/* Corner radius */\n.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }\n.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }\n.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }\n.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }\n.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }\n.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }\n.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }\n.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }\n.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }\n</code></pre>\n\n<p>Unfortunately, these don\'t appear to have any effect in IE7 as of this post.</p>\n\n<p>In jQuery code, one of these classes might be applied in a fashion something like this:</p>\n\n<pre><code>$(\'#SomeElementID\').addClass("ui-corner-all");\n</code></pre>\n'}, {'answer_id': 1385095, 'author': 'Thomas Maierhofer', 'author_id': 165958, 'author_profile': 'https://Stackoverflow.com/users/165958', 'pm_score': 0, 'selected': False, 'text': '<p>If you want full control about the border an d gradient, you can use my iQuery Background Canvas plugin. It works with a HTML5 Canvas element and allows to draw borders and backgrounds in any variation. But you should be able to program JavaScript</p>\n\n<p>This is a full featured sample with a background gradient and rounded corners. as you can see, the drawing is completely done in JavaScript, you can set every parameter you want. \nThe drawing is redone on every resize (Due to the resize Event), you can adapt the background drawing to show wat you want on this specific size. </p>\n\n<pre><code>$(document).ready(function(){\n    $(".Test").backgroundCanvas();\n});\n\nfunction DrawBackground() {\n    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);\n}\n// Draw the background on load and resize\n$(window).load(function () { DrawBackground(); });\n$(window).resize(function() { DrawBackground(); });\n\nfunction TestBackgroundPaintFkt(context, width, height, elementInfo){\n    var options = {x:0, height: height, width: width, radius:14, border: 0 };\n    // Draw the red border rectangle\n    context.fillStyle = "#FF0000";\n    $.canvasPaint.roundedRect(context,options);\n    // Draw the gradient filled inner rectangle\n    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);\n    backgroundGradient.addColorStop(0 ,\'#AAAAFF\');\n    backgroundGradient.addColorStop(1, \'#AAFFAA\');\n    options.border = 5;\n    context.fillStyle = backgroundGradient;\n    $.canvasPaint.roundedRect(context,options);\n}\n</code></pre>\n\n<p>Here is the plugin, and this site makes a vast use of it:\n<a href="http://www.maierhofer.de/en/open-source/jquery-background-canvas-plugin.aspx" rel="nofollow noreferrer">jQuery Background Canvas Plugin</a></p>\n'}]
['https://Stackoverflow.com/questions/35486', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2066/']