--- title: "Rounded Corners With jQuery · Appnovation" url: "https://www.appnovation.com/insights/rounded-corners-jquery" description: "Browsers without CSS3 support? How to create cross-browser rounded corners with jQuery plugins and clean code." --- Article # Rounded Corners With jQuery [![](https://cdn.sanity.io/images/ey850001/production/47a0c58773e96fdbf1db47e08ee5f9d00965c1da-68x68.png?w=68&auto=format) Erico Nascimento Design Director](/people/erico-nascimento.md) Jul 09, 2010 2 min read ![Appnovation Blog Default Header](https://cdn.sanity.io/images/ey850001/production/9efe1c26d9584ecfb3dfef5a63e698bf4567d305-1440x600.jpg?w=1400&auto=format) Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly. Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one: The “jQuery Corner Plugin” ([jquery.malsup.com/corner/ (opens in new window)](http://jquery.malsup.com/corner/)) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible. Here’s how to implement it: 1. If you are not using Drupal, add the jQuery library to your site. 2. Add the[plugin file (opens in new window)](http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09) to your site header. 3. Create a separate javascript file that will call the plugin on the elements you want. It will look something like this: `$(document).ready(function() { $('#pagebody').corner("top 10px"); /* adds a 10px radius corner to the top of the page container */ $('h2').corner("5px"); /* adds a 5px radius corner to every h2 element */ });` Now, here is an interesting question! What if you wanted to use the rounded corners on every form submitted BUT not in a specific case, like on your search "form submit?" Well, then you’ll have to use the “not” operator. Here’s an example: `$('.form-submit').not($('#search-form .form-submit’)).corner("5px");` Every element with the “form-submit” class that is NOT inside a div with a “search-form” id will get rounded corners. Very simple isn’t it? Whats your favorite technique to create rounded corners? Share with us! Have a happy theming! [![](https://cdn.sanity.io/images/ey850001/production/47a0c58773e96fdbf1db47e08ee5f9d00965c1da-68x68.png?w=68&auto=format) Erico Nascimento Design Director · Appnovation](/people/erico-nascimento.md) ## Keep reading [![What is Sovereign AI](https://cdn.sanity.io/images/ey850001/production/a5889abdd5e80376912546622e046e3fbef234b4-2496x1664.png?w=640&auto=format)](/insights/what-is-open-source-sovereign-ai.md) Article · 7 min AI ### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md) Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation. [Iain MacNeil](/people/iain-macneil.md) Article [![AI-first experience design](https://cdn.sanity.io/images/ey850001/production/8bbc2418e87924ef10f36115478a2e10d5bed95e-1584x624.jpg?w=640&auto=format)](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Article · 6 min AI Sep 10, 2026 ### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years. [Andrew Douglas](/people/andrew-douglas.md) Article [![What Becomes Possible When AI Can Read All the Data](https://cdn.sanity.io/images/ey850001/production/c28ab0bd26753421ee42937e13adc7a7f19b47f0-1296x510.jpg?w=640&auto=format)](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Article · 4 min AI Sep 09, 2026 ### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before. [Appnovation](/people/appnovation.md) Article ## Get the thinking, *before everyone else.* One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.