How to round corners in an image in Photoshop? Slim frame with rounded edges
Last update:18/01/16
How to round corners in a picture in Photoshop
When designing blogs, I have repeatedly made rounded corners on images, but what is done not so often and not automatically enough is quickly forgotten. And I again complained about the need to describe the work done right away. Therefore, now, almost without delay, I will describe the sequence of actions. True, because of the disease, the “hot tracks” were no longer hot.
For those who like to watch everything, a short video on “how to round corners in Photoshop”:
First of all, you need Photoshop. Where to get it, there are two options:
- buy on the official website
- find on torrents
Which option to choose is up to you.
So, let's launch Photoshop. Open the picture whose corners need to be rounded in Photoshop (File → Open). If the image dimensions are larger than you need, you can change the dimensions (Image → Image Size).
On the right, in the preview image, there is a small lock that blocks editing of the original image (background layer). To create a new layer and work with it, double-click on it with the left mouse button, do not change anything in the window that appears, click “Yes”.
If there is no lock, then one of two things:
or in your version of Photoshop the background layer can be edited (which is doubtful, but suddenly)
or the above can be done using another operation: from the top, in the menu bar, select “Layers”, in the submenu that opens, select “New” and follow the arrow - “from the background”, and in the same window that opens, click “Yes”.
Select “Rectangle with rounded corners” in the tools.
Select the mode on the top of the settings panel: “Outlines”. Set the radius to round corners in Photoshop. I chose 40 pixels, you can choose the one that suits your picture.
We draw a rectangle of the required size in the picture: place the cursor (it takes the shape of a cross) at the desired point on the upper left and, without releasing the mouse button, move to the opposite corner to the desired point. Our picture has a transparent rectangle with rounded corners.
Right-click on the rectangle. In the context menu, select “Create selected area”, set the feathering radius to 1 pixel and click the “Yes” button.
Using the menu Select → Invert, select everything outside the rounded rectangle and delete the selection with the Delete key.
If you did not overlay a rectangle over the entire picture, then the excess transparent background can be removed using the sequence of commands Image → Trimming → Based on transparent pixels → Yes.
We received a picture with rounded corners. We save it for the Web: File → Save for Web and Devices. Select Preset: PNG-24, Transparency and click Save. In PNG-24 format, the image is saved with a transparent background so that it can be embedded in any website design. 
The same thing can be done with the Ellipse tool, then you will get a round picture or in an elliptical frame.
So, today we learned how to round the corners of any picture in Photoshop.
Everyone has long been tired of traditional rectangular corners in website design. Rounded corners are in fashion, which are made not using images, but through styles, for which the border-radius property is used. This property can have one, two, three or four values separated by a space, which determine the radius of all corners or each individually.
In table 1 shows a different number of values and the type of block that is obtained in this case.
| Code | Description | View |
|---|---|---|
| div ( border-radius: 10px; ) | Rounding radius for all corners at once. | |
| div ( border-radius: 0 10px; ) | The first value sets the radius of the top left and bottom right corners, the second value sets the radius for the top right and bottom left. |  |
| div ( border-radius: 20px 10px 0; ) | The first value sets the radius of the upper left corner, the second - both the upper right and lower left, and the third value - the lower right. |  |
| div ( border-radius: 20px 10px 5px 0; ) | Sequentially sets the radius of the upper left, upper right, lower right and lower left corners. |  |
Example 1 shows how to create a block with rounded corners.
Example 1. Corners of a block
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 1.
Rice. 1. Block with rounded corners
An interesting effect can be obtained if you set the rounding radius to be greater than half the height and width of the element. In this case, you will get a circle. Example 2 shows how to create a round button with a picture.
Example 2: Round button
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 2.
Rice. 2. Round button
In the Opera browser, rounding to
The border-radius property can be combined with other properties, for example, adding a shadow to an element. In example 3, a set of circles is made, one of which is highlighted using box-shadow . This set can be used to navigate through pages or photos.
Example 3. Glow
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 3.
Rice. 3. Glow around the circle
Using border-radius you can make not only a circle, but also an ellipse, as well as an elliptical rounding for a block. To do this, you need to write not one value, but two, separated by a slash. Writing 20px/10px means that the horizontal radius of the fillet will be 20 pixels, and the vertical radius will be 10 pixels. Example 4 shows how to create elliptical corners to add a comic-book style caption to a photo.
Example 4: Ellipses
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 4.
Rice. 4. Using elliptical corners
You can also change the appearance of the corners on images by adding the border-radius property to the img selector, as shown in Example 5.
Example 5: Images
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Working in Photoshop allows you to achieve the same result in different ways. But, naturally, it will be most rational to use the path that is as simple and effective as possible. It should be noted that rectangular cropping of photos in Photoshop occurs using a simple “crop” tool. At the same time, achieving a similar result, but with rounded edges, is quite difficult for novice users, since the program does not offer an obvious solution.
Before you round the edges in Photoshop, you should understand why it is necessary. The main reasons are:
Obtaining an image or its detail that has the required shape, without the need for further editing;
Getting an original and beautiful design for photography.
So, having launched Photoshop, you need to add the file that will be cropped. To do this, you can use the “File”, “Open” menu items, or simply drag the photo into the program’s working environment. In order to round the edges in Photoshop, you must first give the image the appropriate size. This can be done through “Image”, “Size” or, having previously created a new document with the given dimensions, move the desired file into it. There you can deform it at your own discretion using “Editing”, “Transformation”.
Having prepared a working sample in this way, you can proceed directly to the procedure for how to round the edges in Photoshop. To do this, you need to find one of the tools on the left panel, which is called “rectangle” (called by the “U” key), and select from the list of its varieties - “with rounded edges”. The user can adjust the angle of the rounded edges using the “radius” option, which will become available on the top panel.
Then you should select the desired part of the image. Here you should pay attention to whether the resulting rectangle overlaps the original photo. If this is the case, then in the layers panel located on the right, you should lower the newly formed layer with a selection to a position that will be lower than the working sample. The selection - in this case a “rounded rectangle” - can be moved using the usual tools of the program.
In order to understand how to round the edges in Photoshop, you need to right-click on the layer with the resulting rectangle and select “Create Selection”. Then, on the main panel at the top, click “Select”, “Invert”. Then it remains to go to the layer with the main image and apply the “Delete” command, which is carried out by pressing the corresponding button on the keyboard or through the “D” hotkey. The result can only be saved through the “File”, “Save” menu for the “native” PSD format. Or you can use “Save As...” to get the result in any other common format.
This is the easiest and fastest way to round edges in Photoshop. Now it’s up to your imagination to decide where you can apply your new knowledge.
I have been looking for a long time for how to round the corners using Adobe Photoshop, but everything is left out somewhere, or it is written incorrectly. As it turns out, rounding the corners of any picture will take no more than 30 seconds, naturally after you learn how to do it.
And so, in order to perform such a simple operation, you need to launch the application and drop the image we need inside the program, or use Menu->File->Open->Required picture.jpg. I will use a regular image of nature.
Pay attention to the lower right corner, a background image has appeared in “Layers”, it must be converted to a layer. To do this, right-click on the background and select “Layer from background.”
As a result of this action, our background will be converted into a layer.
Create a duplicate of the image by right-clicking on Layer 0 and selecting “Create a duplicate layer.”
Figure2
Hide "Layer 0" from the work area. To hide a layer, click the EYES icon next to the layer name.
Select the desired part of the image.
Once you have marked the desired part of the image with a rectangle, right-click inside the selection and select “Create selected area”.
In the dialog box, click OK, but don’t touch the feathering.
A very important point! Select Layer 0 (Copy), then press the DELETE button on the keyboard. Layer 0 (copy) should be selected with a regular mouse click.
If everything is done correctly, in Photoshop you will see something like this. Now you can save the image, for example in png format, and enjoy the work of art.
There is one more point: if the cut out piece is two or even 3 times smaller than the original image, it will have a large empty area, which must be removed. To do this, select the cutting tool and select the area of the image without the empty area.
Then go to the Edit->Copy menu.
Go to the File->New menu and just click OK. The program will automatically adjust the width and height of the canvas of the selected area of the image.
In the new project “Unnamed 1”, and we will automatically find ourselves in it, go to the Edit->Insert menu.
The best way to save a picture is to use the “Save for Web” option. Firstly, you can manually select the image quality as a percentage, and secondly, the image size will be several times smaller than if saved in the usual way.
And what did we get as a result?
For those who don’t understand how I managed to round the corners, I specially recorded a video that will help you with this simple task.
