Round-cornered box with line border for web pages
Use the rounded rectangle tool (found in the drop-down choices below the type tool) to create round-cornered box. The fill color can be changed by double clicking on the first icon in the layer.
Double click on the layer to the right of its name to open the Layer Style menu.
Select the Stroke option at the bottom of the left menu.
Set the line weight and color.
Select Gradient Overlay in the Layer Style menu to add a graduated fill appearance to the box. The gradient can be adjusted by clicking on the gradient selector as shown in the image at the left.
Close the Layer Style menu. The names of the applied styles show in the Layers menu so you can click on them and revise as you wish or add other layer styles.
Save the image for the web maintaining a transparent background.
Select File >> Save for Web.
In the menu that opens (shown in the image at the left) choose either GIF or PNG format to preserve the transparency.
