Solved

CSS & JQUERY Rounded Corners with 1px Boarder?

Posted on 2009-05-20
5
1,738 Views
Last Modified: 2012-05-07
What's the easiest most efficient way to execute this?

Currently I'm using
http://malsup.com/jquery/corner/

But I am having a hard time trying to make the 1px border around my div's.

Please include a working example with CSS code too:

I would like a rounded box with a 1px border of a different color.


P.S.
If you know of a better jquery plug in to get this done, please let me know.


//rounded corner example code from the website...
$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Open in new window

0
Comment
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:Chad Haney
ID: 24434649
A 1px border will be too thin for this plugin to utilize properly.  Use a min of 2px.

Below is an example of a box with a 2px border and the necessary parts to include.
<html>
<head>
<style type="text/css">
 
/*Change background color here for inner color*/
div.inner { margin: 0; background: #ffc; padding: 10px; border:0; zoom:1;}
 
/*Change background color here for border color*/
div.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em }
 
/*Use this to hide the code*/
div.inner p {display:none;}
</style>
<!--Make sure to include the scripts with proper pathing-->
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
 
<script type="text/javascript">
    // test auto-ready logic - call corner before DOM is ready
    $('#readyTest').corner();
    
    $(function(){
        $('div.inner').wrap('<div class="outer"></div>');
        $('p').wrap("<code></code>");
 
        $('div.demo, div.inner').each(function() {
            var t = $('p', this).text();
            eval(t);
        });
 
        // fixed/fluid tests
        $("div.box, div.plain").corner();
        $("#abs").corner("cc:#08e");
    });
</script>
 
</head>
<body>
<div class="inner"><h1>Round</h1><p>$(this).corner("round 8px").parent().css('padding', '2px').corner("round 10px")</p></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:www_puertoricoautoforo_com
ID: 24435194
Is there a possible way by using the z-axis to obtain 1px?
0
 
LVL 12

Expert Comment

by:Chad Haney
ID: 24435280
You can set the variable to 1px, but it will cause square corners due to the way the code is written.  Unfortunately a decent looking rounded corner in this case will require the minimum of 2px.
//From
<div class="inner"><h1>Round</h1><p>$(this).corner("round 8px").parent().css('padding', '2px').corner("round 10px")</p></div>
//To
<div class="inner"><h1>Round</h1><p>$(this).corner("round 8px").parent().css('padding', '1px').corner("round 10px")</p></div>

Open in new window

0
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 24494541
Were you able to resolve this using css & Jquery?  If not you may be able to go about it using rounded corner images and borders so that you can achieve your 1px effect.
0
 

Author Closing Comment

by:www_puertoricoautoforo_com
ID: 31583619
yes, this is what I ended up doing.. using jquery to automatically insert 4 div's to a certiain class div with 1px borders.

thanks
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question