CSS3 Corner Radius question

I know this question should be posted on a CSS3 Forum but I can’t seem to find one and thought DW users might have come across an answer.
When the corner radius of an AP Div is defined and an image is placed inside the APD, the rectangular corners of the image are not clipped by the APD box. The image corners actually stick out beyond the rounded corners. Is there a style property that hides the image corners or clips them? I’ve tried setting the overflow to Hidden without success.

Actually there is a way to clip images as long as you target the image and not the containing element as in
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#tab1 img {
    position:absolute;
    left:92px;
    top:33px;
    width:115px;
    height:34px;
    z-index:1;
    /* border radius and drop shadows */
    border-radius: 20px 20px 0px 0px / 20px 20px 0px 0px;
    border-top-left-radius: 20px 20px;
    border-top-right-radius: 20px 20px;
    border-bottom-right-radius: 0px 0px;
    border-bottom-left-radius: 0px 0px;
    box-shadow: -4px -7px 5px 0px rgba(128,128,128,0.3);
    -moz-box-shadow: -4px -7px 5px 0px rgba(128,128,128,0.3);
    -webkit-box-shadow: -4px -7px 5px 0px rgba(128,128,128,0.3);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #333333;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-left-color: #000000;
</style>
</head>
<body>
<div id="tab1"><img src="Home1.png" alt="tab1" /></div>
</body>
</html>
Gramps

Similar Messages

Corner radius question

When I make a rectangle stroke with a corner radius in Illustrator and try to scale it down using shift and drag the corner radius changes. How do I keep it from doing this?

If you don't want this to happen, you will have to do the scaling in two stages using the Direct Select tool. Highlight all the anchor points along one end and scale horizontally using the Shift key to constrain. Then do an edge in the same manner.

Get Current Selected RoundRect Corner Radius

Alright, been working on this stuff for hourssss now, so I felt that after this much searching and messing about it would be worth it to ask this question.
So I have a rounded rectangle vector mask path here:
http://cl.ly/1M2E0C1X0V1y2w430x0q
Is there any way at all to get the corner radius of that rounded rectangle which is (40) and then assign that to a variable? If there isn't an easy way to do it, the next best guess would be to take the first pathitem distance from the top and subtract the 8th pathitem distance from top of canvas from that essentially getting the border radius just from the change in distance between those two points from the top of the canvas. I have an example shown below:
http://cl.ly/2L280K0O0s0J3I3A3h2O
This code gets the x,y values of all points in the document, can I limit it to just the points on that layer vector mask? And then subtract one from the other and assign that to a variable?
#target photoshop
var doc = app.activeDocument;
var ppList = doc.pathItems[0].subPathItems[0].pathPoints;
for ( var i =0; i < ppList.length; i++ )
$.write('Path Point '+i)
$.writeln(' X:'+ppList[i].anchor[0]+' Y:'+ppList[i].anchor[1])

Then it should not be hard to identify the PathPoints that for the straight parts and then evaluate the coordinates.
What’s giving you problems?

Feature Request: Ability to modify corner radius on boxes after creation

Hi. As an interface designer I often use the rounded box tool to create buttons.
I noticed that you can only select the corner radius at the time the box is created and not modify it thereafter--your only option is to delete the shape and create a new one with the new radius values.
I've tried the selection tools but "corner" radius as an option is nowhere to be seen.
Would be nice to change that as easily as size of fonts to quickly see how different styles would look on a page.
Cheers.

Hi. As an interface designer I often use the rounded box tool to create buttons.
I noticed that you can only select the corner radius at the time the box is created and not modify it thereafter--your only option is to delete the shape and create a new one with the new radius values.
I've tried the selection tools but "corner" radius as an option is nowhere to be seen.
Would be nice to change that as easily as size of fonts to quickly see how different styles would look on a page.
Cheers.

How to scale image, and not scale corner radius

Working on a catalog with image in a .075" corner radius shape. The page are generated by a CMS system so the images are needing to be recropped and scaled. Cannot find a way to scale the image and keeping the rounded corner radius at .075".
CS5 Mac

Thanks for your reply and desire to help. I realize that but found that you can only adjust width or height and not even scale to get this to work,and other problems with this method.
I am only interested in being able to scale both frame and image simulataneously and holding the corner shape.
For a program called InDesign, the lack of this essential basic feature is NOT DESIGN friendly. Anyone designing a catalog would be wise to avoid using anything else but square corners on images.

Rounded rectangle set corner radius in pixels?

If I create a rounded rectangle, is it possible to set a pixel dimension on the corner radius rather than dragging the handle and doing it by eye?
Thanks

Yes. Change from the default % to px in the Properties panel. You can also enter an exact radius in the Autoshape Properties panel if you use the rounded rectangle auto shape instead of a regular rectangle.

Change corner radius of rounded rectangles after drawing them

It is great that vector shapes feel even "smarter" in CS6, allowing you to change the stroke width and color after drawing them.
Designing user interfaces, I use a lot of rounded rectangles, and I often have to change the corner radius of a rounded rectangle that I've drawn by a pixel or two. Rather than having to trash the original shape and making a new one, it would be great if you could select the existing rounded rectangle and change the corner radius. I realize that there is a dilema: the user is technically free to move anchor points around and change the object from a rounded rectangle; but Photoshop could basically keep track of whether or not the shape's anchor points have been modified, and whether or not it should still be classified as a rounded rectangle.
Alternatively, this might be an even better solution: rather than having the rounded rectangle be its own shape tool, as it currently is, just give users the rectangle tool, and let them adjust the corner radius of a rectangle at any time in the tool's options bar. The rounded edges of the rectangle would technically not be created with anchor points, it would be more like a smart effect that Photoshop is performing by rounding the edges. Another benefit of this would be that you could free tranform the rectangle, and the rounded corners would not get screwed up as they currently do, because Photoshop knows that this is just a rectangle shape that you always want to have rounded corners on.

Oh thanks for the heads up, I had not seen the Photoshop GetSatisfaction page before. Here is a topic with the idea: http://feedback.photoshop.com/photoshop_family/topics/it_would_be_good_if_the_roundrect_ve ctor_tool_corner_radius_was_editable_during_and_after_drawing
Vote it up people.

Rounded Rectangle Tool Corner Radius setting

I'l like to see the Rounded Rectangle Corner Radius setting moved from General Preferences to either the RR Tool option bar, or double click on the RR Tool to access its Corner Radius setting.

Yes. Change from the default % to px in the Properties panel. You can also enter an exact radius in the Autoshape Properties panel if you use the rounded rectangle auto shape instead of a regular rectangle.

Adjusting the Corner Radius of a Rounded Rectangle Mask

Rounded rectangle shapes have a controller to adjust their corner radius. Is there a way of adjusting the corner radius of a rounded rectangle mask?

Hey David,
I had never tried that before, but I looked and tried and "heck"... you can't do it. I could see how I would want to be able to do that, now that you mentioned it.
I cannot understand the inconsistencies in some of the iLife and iWork apps. I still think you should be able to add a "Table" in iWeb, but alas, not even in iWeb'09. Come on Apple. Clean up some of these pretty obvious loose ends.
Adam

Flex 4 skin how to set tree control corner radius..?

hi .,
     i have using flex4 mx tree control to reduce the corner radius.
application using tree control code...
<mx:Tree   contentBackgroundColor="#FFFFFF" id="folderTree" labelField="documentFolderName" dataProvider="{folderTreeArray}" itemClick="clcikchanged(event)" height="650" borderColor="#FFFFFF">        </mx:Tree>
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
    @namespace mx1 "library://ns.adobe.com/flex/mx";
     mx|Tree
    border-skin: ClassReference('com.istmanagement.skins.Application.boaderskin');
    </fx:Style>
borderskin.mxml coding here...
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    <fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
      <s:Rect id="background" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
   <s:BorderContainer cornerRadius="8" width="255" height="650">
    </s:BorderContainer>
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Skin>
tree control corner radius is reduced to display., after i have using <mx:HDividedBox > to drag this to override a tree control...
how to solve this problem.,
With Regards.,
LinFlex-

Did you every solve this issue?

Smart Shapes corner radius

In Captivat 5.5 it was possible to change the corner radius of a rectangle.
In Captivate 6 is it possible to change the corner radius of a smart shape rectangle or round corner rectangle?

Hello Jay,
You cannot change it for the rectangle, but for the rounded rectangle you'll have to drag the small yellow handle to change the corner radius. I regret that it is no longer possible to type in a number for that radius (asked for it, not listened to) but you can edit with the mouse.
BTW: those yellow handles do appear on a lot of shapes and always are meant to change the look. If you want more editing you can convert each shape to Freeform shape and move the handles as well as the tangent points to create nice Bezier curves. Not every editing functionality is there like in Illustrator/Photoshop.... (asked for a full Pen functionality but rejected feature request) but it is a start. Perhaps I should create some video on YouTube (did you know I started creating them?)
Lilybiri

Unwanted corner radius in menu items

I have eliminated corner radiuses on my main menu items. So why am I still getting corner radiuses, mostly just on the left side of each menu item?
idlefreevt.org
And also why is there now (since latest Muse upgrade) an unwanted stroke around bottom-of-page menu items?
An answer would be greatly appreciated.

The first issue is solved. I guess once I relaunched Safari, the corner radiuses were gone. But the second issue - stroked boxes around the supplemental menu items - persists. I just want those menu items text only.
BTW, the stroke does not show in Muse Design and Preview - On Master pages, stroke is set at 0 and no color.

Css3 border radius

== Issue
==
I have another kind of problem with Firefox
== Description
==
I am using css3 to create rounded edges on an img in my html.
Safari renders border radius ok but Firefox needs image in CSS (background image)
here is the css
<code>/* only works in webkit */
#sample img{
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width:220px;
height:220px;
/* works in webkit and gecko */
#colouredbox {
background-color: #fae93a;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width:220px;
height:220px;
/* works in webkit and gecko */
#imageviacss {
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-image: url(220sample.jpg);
width:220px;
height:220px;
</code>
<br/> <br/>''(Edited by Moderator: placed code in a CODE block - c)''<br/> <br/>
== This happened
==
Every time Firefox opened
== i was trying it out :D
==
== Firefox version
==
3.6.4
== Operating system
==
Intel Mac OS X 10.6
== User Agent
==
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.4) Gecko/20100513 Firefox/3.6.4
== Plugins installed
==
*-Displays PDF documents in the browser.
*Gecko default plugin
*Runs Java applets using the latest installed versions of Java. For more information: Java Embedding Plugin. Run version test: Java Information.
*doubleTwist Web Plugin
*iPhoto6
*Unity Web Player lets you experience dazzling interactive 3D right in your browser. For more information, visit Unity .
*Allows webpages to support pressure-sensitive drawing on Wacom pen tablets.
*3.0.50106.0
*The Flip4Mac WMV Plugin allows you to view Windows Media content using QuickTime.
*Shockwave Flash 10.0 r45
*The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.

See:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
https://developer.mozilla.org/en/CSS/-moz-border-radius
A good place to ask questions and advice about web development is at the MozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

802.1x EAP-PEAP - Radius Question

We're going to be deploying a wireless solution to a customer at some point shortly. So far we have a WLC 2500 Series,
1140 LAPs, and a 2960-S switch. We're going to have Windows 7, iPhone, iPAD devices, and I was going to implement
802.1x EAP-PEAP. I'm going to need a RADIUS server, but I was just wondering is there a cheaper solution than just
getting a Cisco ACS to run a simple RADIUS server which is all I need.
Also, when the Supplicant sends its NAI in a EAP-ResponseIdentity message, what exactly is this username
and how does it differ from the username you provide after the secure TLS tunnel has been configured.

Hey John,
Yes, in fact its all about feeling comfortable. So here is a video showing LOCAL PEAP on a WLC.
http://www.youtube.com/watch?v=YIxG4OEfwtY
The 2000 is becuase there is a database limit this includes MACS, LOCAL ACCOUNTS and AP MACs for AP policy. The mac is 2048 .. Here I blogged about this ..
http://www.my80211.com/cisco-wlc-cli-commands/2009/12/27/configure-local-mac-authentication-on-cisco-wlcs.html
So yes it sounds right and you should be good.
Hope this makes you feel a little bit better with your direction. If this helps can you mark the question as answered ?
Thanks John!
"Satisfaction does not come from knowing the solution, it comes from knowing why." - Rosalind Franklin
‎"I'm in a serious relationship with my Wi-Fi. You could say we have a connection."

Urgent RADIUS question

Hi,
At a customer we have our WAAS appliances enabled for Radius authentication (via via to Active Directory). The authentication it self works. But when the AD password policy requests users to change credentials the AD accounts start locking-out.
We found out that CM is pushing user accounts to the appliances. When saving the account to the CLI config the appliance, the appliance does a radius authentication request. Because CM is configured with old/expired passwords this action locks our accounts quickly (100+ appliances).
How can we fix this? Can we configure the system not to store our old accounts and push them out to the remote appliances??
Regards,
Erik
We see the following passing in the logs for every user every once in a while.
2012 Nov 12 14:58:58 wae01-sitea config: %WAAS-PARSER-6-350232: CLI_LOG log_cli_command: username "etam" passwd
2012 Nov 12 14:58:58 wae01-sitea cfg_bin_users: %WAAS-UNKNOWN-5-899999: ***pam_radius pam_sm_authenticate: Got user name #####
2012 Nov 12 14:58:58 wae01-sitea cfg_bin_users: %WAAS-UNKNOWN-5-899999: ***pam_radius pam_sm_authenticate: Sending RADIUS request code 1
2012 Nov 12 14:58:58 wae01-sitea cfg_bin_users: %WAAS-UNKNOWN-5-899999: ***pam_radius pam_sm_authenticate: Got RADIUS response code 3
2012 Nov 12 14:58:58 wae01-sitea perl: %WAAS-CMS-5-700001: Done with usercreation username :: "etam" process return value :: 0

Hello,
You're on the right track with CSM (Cisco Security Manager). CSM would fit perfectly in this role. We use it to maintain 6 ASAs and about 120 PIX firewalls. It is great for policy-based firewall administration. Compared to other CiscoWorks products, CSM is very stable and performs ideally in the situation you describe above. If you have anymore questions, let me know.
-Mike
http://cs-mars.blogspot.com

CSS3 Corner Radius question

Similar Messages

Maybe you are looking for