Solved

CSS & JQUERY Rounded Corners with 1px Boarder?

Posted on 2009-05-20
5
1,742 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 64
Top Aligning Inner Divs 5 33
WordPress Creating scrolling box at top of page 1 31
Why is my combox not displaying in jqwidgets grid 14 33
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

737 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