Round border corners

Hi
have a look at this:
http://www.mrandmrssmith.com/?CMP=%20KAC-OF9998476933
specifically the corner being rounded, and the drop shaddow.
2 questions, I realise I can achieve all this by creating an
image to put in back of a table or layer, but its heavy on the
download. is it possible to achive these functions simply using
css? I have dw8 2004mx so its a little out of date, so if its not
availabe as a function in that version I need to know where to go
looking for the xhtml to create it.
any ideas?
cheers

digi-mech wrote:
> Hi
>
> have a look at this:
>
http://www.mrandmrssmith.com/?CMP=%20KAC-OF9998476933
> specifically the corner being rounded, and the drop
shaddow.
>
> 2 questions, I realise I can achieve all this by
creating an image to put in
> back of a table or layer, but its heavy on the download.
is it possible to
> achive these functions simply using css? I have dw8
2004mx so its a little out
> of date, so if its not availabe as a function in that
version I need to know
> where to go looking for the xhtml to create it.
>
> any ideas?
Google for CSS Rounded Corners, there are loads of tricks and
techniques
you can use, most of them rely on images, but after one page
load the
images are now in the cache and each page will load much
quicker.
Steve

Similar Messages

CSS rounded border issue

I've got a CSS rounded border issue. Safari (4.0.3) is drawing a slight white artifact on the rounded corners. Look at the comparison between the Safari screenshot and the Firefox (3.5.x) screenshot (look at the border on the Watch button):
http://www.prototypos.com/screenshots/safariroundedborder.png
http://www.prototypos.com/screenshots/firefoxroundedborder.png
Do folks on the Apple Safari dev team read this site? If so, I'd appreciate it if they take a look at this issue.
thanks, Chuck
Message was edited by: Dr. Chuck
Message was edited by: Dr. Chuck

Are you doing this with CSS3 ? If your using CSS 3 you know it hasn't really been fully implemented in all browsers, (even if they say so). Even tho CSS 3 is out and running, I myself tend to shy away from stuff like round corners.
No Apple won't see this.

Correct "clip" for background with round border

Hi all. I'm having a problem with a round border and a round background. If you look at the code below you will see that I have a border specified with a radius of 5. If I run this, the background sticks outside of the border. If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light red. If I change the background radius to 4 then the inside of the border doesn't quite match up to the background.
How do I set a border and just say the background should be "clipped" by it?
Thanks, Nick.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        FlowPane flowPane = new FlowPane();
        Scene scene = new Scene(flowPane, 500, 500);
        flowPane.setStyle("-fx-padding: 10;");
        Label label = new Label("Hello");
        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue;");
//        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue; -fx-background-radius: 5;");
        flowPane.getChildren().add(label);
        stage.setScene(scene);
        stage.show();
    public static void main(String[] args) {
        launch(args);
}

This is actually a kind of tricky question to answer well.
The standard caspian.css stylesheet for JavaFX 2.2 makes almost no use of borders.
The standard caspian controls have things that look like borders or highlighted edges, but these are almost always implemented by layered backgrounds.
For instance a focus ring around a button is a blue background which is layered underneath the button background, making the ring look like a border, even though it's not.
I don't really know why the layered background approach was chosen over a border + background approach. Possible reasons are:
- it's easier.
- it performs better.
- it provides a better visual experience.
Maybe it is one or all of the above.
Regardless, I think there was likely some good reason why the layered background approach was chosen, so you'd probably best stick to it.
One advantage of using this approach is there are lots of similar examples in caspian.css that you can copy from and use.
A sample css style string for your sample app using layered borders, might be something like:
-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen;By playing around with combinations of layered backgrounds, padding and background-insets you can achieve, borders around your controls which can be either entirely enclosed within your control's standard layout or outside of it (like the focus ring), so that when you add something like a focus ring around your control it doesn't shift the control's onscreen position - it really just surrounds the control.
An updated version of your sample app which uses this is below:
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
@Override public void start(Stage stage) throws Exception {
//    System.setProperty("prism.lcdtext", "false");
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane, 500, 500, true);
    stackPane.setStyle(
        "-fx-background-color: cornsilk;"
      + " -fx-border-insets: 10;"
      + " -fx-border-color: rgba(128, 128, 128, 0.5)"
    Label label = new Label("Hello");
    label.setStyle(
//        "-fx-padding: 5;"
//      + " -fx-background-insets: 0, 5;"
//      + " -fx-background-radius: 5, 5;"
        "-fx-padding: 1;"
      + " -fx-background-insets: 0, 1;"
      + " -fx-background-radius: 5, 5;"
      + " -fx-background-color: firebrick, forestgreen;"
      + " -fx-text-fill: whitesmoke;"
//    label.setScaleX(5);
//    label.setScaleY(5);
    stackPane.getChildren().add(new Group(label));
    stage.setScene(scene);
    scene.setCamera(new PerspectiveCamera());
    stage.show();
public static void main(String[] args) { launch(args); }
}Now for some other questions you raise:
If I run this, the background sticks outside of the borderYeah the background radius and border radius properties are independent, so if you use a rounded border, you also need to use a rounded background or the background will overflow the border corners.
If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light redJavaFX 2.2 uses anti-aliasing in pretty much all of it's rendering (and even another trick for lcd called sub-pixel rendering of text in some cases). Your border is only one pixel wide. If the border isn't sitting exactly on a pixel boundary, it's going to be blended with the background. Even if the straight sides of the border sit exactly on the pixel boundary, when the border turns the corners, the anti-aliasing algorithms will kick in blending the border corner and the background around the inside edge of the corner.
You chose a green background and a red border. When you mix those two colors, you get purple (which is what is happening).
I don't know of anyway to enable or disable anti-aliased rendering for JavaFX scene graph objects (perhaps something to do that might come along for the ride with the 3D scene graph support in Java 8).
Regardless, you probably want anti-aliasing engaged for your rendering anyway. So you should develop your app knowing that anti-aliasing will happen. To do this, choose colors which blend well when anti-aliased. Caspian does this by deriving a lot of the outer background colors from the inner background colors (i.e. just lightening or darkening the border). This works well because they have the same base rgb component mixture, just in different portions, so the anti-aliasing mixes them seamlessly. Choosing full colors at opposite ends of the rgb spectrum such as red and blue result in jarring mixtures like purple. Even if the anti-aliasing wasn't involved, your eyes can play tricks on you and have difficulty clearly seeing the border between these kind of colors due to the weird optics of the eyes.
Another strategy to alleviate nasty blending is to use more pixels, e.g. instead of a one pixel border, use a two pixel border - the anti-aliasing blending will be far less noticeable. Using the greater pixel strategy works very well in conjunction with newer higher resolution screens (so called retina displays), where the pixels themselves are so small that the human eye is unable to distinguish the pixels and the way they blend.
All that said - your original example with the rounded borders and background doesn't look too bad to me :-)
One other issue I came across when testing this is that there is a -fx-border-style css attribute which can have values of centered, inside and outside, and when I tried to set it I got messages like:
WARNING: com.sun.javafx.css.parser.CSSParser declaration CSS Error parsing in-line style '-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen; -fx-border-style: inside; -fx-text-fill: whitesmoke;' from javafx.scene.Node$22@1bd5d8ab: Unsupported <border-style> 'inside' while parsing '-fx-border-style' at [1,138]
The css reference guide notes that the border functionality copies from the w3c backgrounds and border functionality, but there is no inside, outside, centered border style in the w3c css reference, so I guess there is some error in the JavaFX 2 css documentation there around what is supported and what is implemented from the w3c css reference. Note that I'm not really advocating that the JavaFX css processing should match the w3c css reference as I find the w3c system complicated and difficult to understand.
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
http://www.w3.org/TR/css3-background/#border-style
Perhaps as borders in css don't seem to be used much in JavaFX, the documentation issue isn't such a big one.

How to make a round border around my picture?

I am trying to design a logo that would fit into the center of a Frisbie, yet I cannot figure out how to make a round border around the picture. I have tried using the eliptical tool, and have also tried using the cookie cutter. The only option I can get to work with the eliptical tool, is the feather, yet I can't change the pixel number for some reason, so it just makes a thin circle around the picture. I thought I could cut and paste it, but the copy and cut options were grayed out and didn't work. When I used the cookie cutter, it made a nice border, and I pasted the picture into it, but, there are four sections that need to be filled in with the background color and the paintbucket didn't work in those spaces (they are the gray and white checked areas. (the picture ends up looking like a rectangle inside of a circle). So I made a new blank file and filled it in with the color of the picture's background, hoping to use the cookie cutter tool around the picture that was now pasted into the new blank file (I chose another color for the round border) and I used the cookie cutter around the picture, but when it was finished, the whole picture ended up being white. All I want to do is to make a border around a picture (a round border). Nothing I have done has worked though. What am I doing wrong, or what are some other options for trying to do this? Thanks.

Here is a simple way to add a border. Select the item, add a blank layer, choose the border size and color and the Outside option:
Here is the result:
Note that you don't even need to do the Stroke on a blank layer. You can Stroke directly on the picture layer. However having the blank layer preserves the picture in case you want to start again with different Stroke options.
If this is not what you are looking to do, please clarify.

How to round picture corners in PSE 9.0 without background showing

Hi,
I'm new to PSE 9.0, I'm trying to round the corners of some picture to put on my web site.
I've followed the directions I can find online but none of them work, or there for earlier versions that don't have the same functions that they show.
I can get an outline of the picture with the rounded corners showing but it never removes the sharp corners from outside the rounded rectangle.
When I save the picture as a copy in .PNG , then call it back up there are still sharp corners shown as a background>
I can't believe Adobe could make this simple thing so darned confusing!
Adobe makes good software but there ease of use is horrible.
Can someone please give me step by step how to do this?
Been at it for 4 hours.
Thanks Mitch (mad1015)

You can use the Rounded Rectangle tool.
1. Select the rounded rectangle tool and draw a rectangle, then move the rectangle layer
below your picture.
2. Make the picture layer active and go to Layer>Create Clipping Mask.
3. Make the shape layer active and select the move tool to adjust the size of the rectangle.
4. Go to File>Save for Web and select png 24 and check Transparency.
Added
In step 1 set the radius of the rouned corners in the tool options bar.
MTSTUNER
Message was edited by: MTSTUNER

How do I round some corners of a shape and leave other corners unrounded ?

Hello All;
Could someone tell me how to round some corners of a illustration and leave some corners unrounded ? If I use Effect - Stylize - Round Corners, it works beautifully but it rounds all corners, even the ones I don't want rounded. See attached illustration. I do not want the four corners emclosed in the circle rounded.
Anyone know how to do this (easily, I hope) ?
Thanks.
Tim

Tim,
That's a good one. What you can do is:
Make two rounded rectangles with the dimensions you require, and stack them on top of each other.
Go to the align palette and click the icon that centers the objects vertically.
From your attached illustration, it seems you want to avoid rounding the line segment in the middle top and bottom of each rectangle, so try this:
With the pen P tool, put the point of the pen on the first of (4)four anchor points you are going to add and click.
Now do the same thing for the other three anchor points.
You have now added two anchor points to each rounded rectangle
With the Direct Selection A tool, Shift/click on both of the furthest right anchor points you just created, and hold shift while clicking the corner radiuses that connect with those points on the right side of the illustration. You should have a total of six points highlighted altogether.
Now with your keyboard cursor controls, click the arrow down key as many times as you need to get the angle of the line segment that you were trying not to round.
If there is another way to do it, I'd like to know, but that should work. The corner rediuses you've moved change somewhat, you can adjust them if need be.
Using the grid and snap to point in the View section of the menu bar will help you align the added anchor points nicely.
Sounds like a lot, but I recreated your drawing the way you wanted in about 30 seconds.
Hope this helps.
Tim Dunbar

Rounded specific corners as opposed to all 4

Photoshop newb here -- Is there a quick and dirty way of rounding specific corners verses all 4. I want to round the top of a photo and leave the bottom square. I suppose I could round all 4 and then lay the bottom half the picture back over top, but I was wondering if there was a better way of doing this.
Any tips would be appreciated.

there isn't a command that does what you want, you'll have to do it manually. With the selection active, select Add to Selection in the Options bar(the second icon) and then make a marquee selection so that it overlaps one of the corners perfectly. Press and hold the spacebar to move the marquee selection on the fly and use the smart guides to help you align the two selections by going to View->Show->Smart Guides (or drag in a couple of guides)

Rounded rectangle corners in FW3?

Where the heck is my rectangle tool options panel that let's
me round rectangle edges?!?!?!
you may ask, why version 3? - it's 'cuz my company is too
cheap to upgrade. I use it decently well despite this, but I
digress.
I thought all you had to do was double click the rectangle
tool like it states in the help:
You can round the corners of a rectangle or square as you
draw it by setting the curvature of the corners in the Rectangle
tool Options panel.
Set this value before drawing the rectangle.
To draw a rectangle with rounded corners:
1 Double-click the Rectangle tool to open the Rectangle tool
Options panel.
2 Enter a value in the Corner text box.
3 Hold down the mouse button and drag to draw a rectangle.
Note: You cannot round the corners of an existing rectangle.
The problem is, that the Rectangle tool options panel doesn't
open!! is this a bug? or am i just missing something really
obvious?? help!! has anyone else run into this?

oy vey. never mind - i found it. it's so obvious that i want
to cry. the problem was the inspector was already open and off
underneath something that I couldn't immediately see. what a
doofus. sorry for taking up space.

Rounded border in table but rectangle lines still visible

How can I show only the rounded outline of a table? I've selected rounded border, and that shows up, but so does the rectangle of the table shape. Is there a way to get rid of that so that only the rounded border shows? The rounded border works perfectly for a text box.

For each corner cell in the table set the border edges to 'None'.

Rounding the corners on an image

Hi
Is there a simple way to round the corners on an image?
The way I do it (like on the front page of http://www.villasfloridavillas.com) seems way too complicated...
Sorry if this is a really dumb question!
Cheers
RD

A really flexible way to approach this is to create a path with the Shape tool (U or Shift-U). In your situation, of course, use the Rounded Rectangle tool as D Fosse already suggested. Or, use any closed path you might want to create, using any other tools.
If you need to, use the Free Transform tool (Ctrl-T / Command-T) and/or the Direct Select tool (A) to position, distort, reshape, scale, etc. This can include tweaking the roundedness of the shape you just created, rounding just certain corners, etc.
Then, with the Direct Select tool (A) active, right-click the image and choose Make Selection.
Then, press Ctrl-J (Command-J) to create a new layer cropped to the contents of the shape.
So the sequence is really simple and easy to remember: Shape, Select, Jerk.
     Make a shape,
     Make the shape into a selection,
     Ctrl-J (Command-J).
Note that after you have made the shape into a selection, it only affects the current view. So you can turn layers on and off in the Layers panel, or move the selection around around, and crop out identically-sized chunks of anything on any layer. The Ctrl-J technique makes this fast and efficient.
Bart Cross's "smoothed marquee" technique is pretty cool, though, if you only need rounded corners. However, be careful not to make the original marquee fit the entire image. The marquee will snap to the outer edges, and then the Smooth option will become unavailable. There has to be a pixel or two outside the marquee to enable all the Select / Modify choices (at least this is true in CS4).

Well how I make Rounded Table Corners (html) ?

I use dmwr mx 2004 , well how I make Rounded,Table,Corners
(html) ? CSS TABLES can be with Rounded Corners ?

On Wed, 12 Dec 2007 16:40:01 +0000 (UTC), "123polis123"
<[email protected]> wrote:
>I use dmwr mx 2004 , well how I make
Rounded,Table,Corners (html) ? CSS TABLES can be with Rounded
Corners ?
No - you have to use images.
as already said - just google for more info
http://www.google.co.uk/search?hl=en&q=round+corners+on+websites&btnG=Google+Search&meta=
~Malcolm N....
~

Select Modify Expand is rounding my corners out of nowhere.

I was working on something the other day that may or may not have something to do with this where I was going to Select>Modify>Feather.
Whenever I try to make any type of selection, be it Ctrl+clicking the thumbnail, rectangular marquee tool, or pen tool, It has rounded edges for no reason. I have no feathering on, I have no anti-aliasing on. I tried going to Select>Modify>Feather and changing it to 0 but, it won't let me go below 0.1 and even still, that shouldn't be affecting my selections unless I choose it for each individual selection right? It's just frivolously rounding my edges. I tried deleting my preferences file and that didn't help either. I'm on Photoshop CC btw. The corners seem to be fine until I Select>Modify>Expand. I can't tell if the feather's just so low that you can't tell before the expand or if it's the expand causing the edges to round off. I have been using this method for months now and Expand has never rounded my edges until today.

I know that there's alternatives but, what I want to know is why I have never gotten rounded corners from expand until today when everyone is telling me that getting rounded corners from expand is actually how it's supposed to work. I know for sure that all the feathering options are at 0 but, it's not feathering, it's just rounding and, I know for sure that I was using Select>Modify>Expand to increase the size of specific shapes, most recently for layer masks. I can't think of anything I could have hit that would have caused it to just change out of the blue like this.

How to round picture corners

Hi,
I love Adobe Photoshop Elements. I have gotten Version 10 lately and I have to say, Adobe does not make certain tasks easy.
All I need is to have my pictures either cropped with rounded corners, or to have the pictures with rounded corners without the background showing. Is this at all possible?
I found an explanation regarding this for PSE 9.0 but when I try it (Layer > Create Clipping Mask), this is grayed out and I cannot use it.
Please help!
Thanks,
Jac

Use the Rounded Rectangle tool. You can first specify the radius for the corners.
Double-click on your Background layer to change it to a normal layer.
Use the Rounded Rectangle tool to create a shape layer.
In the Layers panel, move that shape layer beneath the image layer.
With the image layer selected, use Layer...Create Clipping Mask (Ctrl+G).
The layers look like this:
The final result (using Save For Web as a PNG-24 file):
Ken

How to easily create round (shadowed) corners on a photo?

I would like to be able to create easily round corners on any pics of my gallery. Is there a quick way (plugin) to do it?
Thanks

It's another software package from Apple containing Pages, a word processor/desktop publishing type of application, and Keynote, Apple's version of PowerPoint. About the same price of Photoshop Elements 4 for Mac, which, IMO, would be the application to get if I were going to pay that much. PSE can do so much in the way of advanced editing.
Are you saying the vignette tool in iPhoto doesn't work or it's not what you want?
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've written an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.

Rounded table corners in Dreamweaver

I need to create tables with rounded corners in Dreamweaver.
Does anyone have an easy (to understand) solution? I would really
appreaciate it. Many thanks!
PS: Will Dreamweaver ever have this function built in to
their software? Seems to be long over due.

On Mon, 29 May 2006 14:52:49 -0700, paulkirtley
<[email protected]> wrote:
>
> PS: Will Dreamweaver ever have this function built in to
their
> software? Seems
> to be long over due.
>
I wrote a DreamWeaver extension to do this. The output is
XHTML 1.1 valid
(and CSS). Supports borders, drop shadows and inner shadows.
The rects
are initially absolutely positioned, but they support liquid
layout and
relative positioning and there are tutorials on how to do
that. Plus,
once a round rect class is defined it can be re-used over and
over.
http://www.medialab.com/wellrounded
Chris Perkins
Media Lab, Inc.
http://www.medialab.com/sitegrinder
<--Photoshop to the Web plug-in.
New version supports image galleries, flash slideshows, form
creation
(yes, you read that right, form creation in Photoshop) with
PHP and CGI
mail forms supported out-of-the-box, plus vertically
expanding documents,
importing of external HTML, late binding to external HTML
(via PHP
require()) and much more.

Round border corners

Similar Messages

Maybe you are looking for