Borders provide visual separation between elements on a page. You can add borders around just about anything in HTML and there are a few border styles to choose from. Borders are added with the border CSS property.
When creating a border with CSS, you can set three things:
Border width (thickness): The width of the border. This can be measured in any CSS unit, but border width is normally described in pixels (px) or em.
Border style: CSS supports a number of border styles.
Border color: The color used to display the border. The color can be defined like any other color in CSS, with color names or hex values.
These three items are set in a list, separated by a space. For example,
border: 1px solid black;
In this example, a border would be created with 1 pixel thickness. The border would be solid and would be black in color.
You can choose any of these styles for any border:
Solid: A single solid line around the element.
Double: Two lines around the element with a gap between them. The border width is the combined width of both lines and the gap.
Groove: Uses shading to simulate a groove etched in the page.
Ridge: Uses shading to simulate a ridge drawn on the page.
Inset: Uses shading to simulate a pressed-in button.
Outset: Uses shading to simulate a button sticking out from the page.
Dashed: A dashed line around the element.
Dotted: A dotted line around the element.
The CSS padding property changes how close the text will come to the inside edge of the border. Padding can be added to move the text farther away from its borders. Padding can be applied to any element, regardless of whether it has borders, in order to move that element's contents.
you can also add padding so that the contents move away from the top, bottom, right, or left, or in any combination. This is accomplished with the padding-top, padding-bottom, padding-right, and padding-left properties, respectively.
Rounded Corners: border-radius
The border-radius property lets you create rounded corners without the need for images or additional markup. For example,
The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.