Learn CSS Borders: A Complete Guide to Styling Web Elements
Borders are used to create a visual boundary around an HTML element. You can set the width, color, and style of a border using CSS properties.
As an example:
In this example:
- The
border property is a shorthand property that allows you to set the width, style, and color of a border all at once. - The value
1px sets the width of the border to 1 pixel, solid sets the style to a solid line, and black sets the color to black.
You can also use separate border properties to set different values for the width, style, and color.
As an example:
In this example:
- We use the
border-width, border-style, and border-color properties to set the width, style, and color of the border separately.
You can also set borders on individual sides of an element using the border-top, border-right, border-bottom, and border-left properties.
As an example:
In this example:
- Sets a green border on the top and bottom of a div element using the
border-top and border-bottom properties.
The border-radius
Border radius creates rounded corners on an HTML element.
As an example:
In this example:
border-radius: 10px; sets the corner radius of the element to 10 pixels.border: 2px solid red; sets a 2-pixel wide solid red border around the element.