CSS : properties (2) (border, box-sizing, overflow)

border

In CSS, the border property is used to define the border around an element. It allows you to specify the width, style, and color of the border. The border property can be shorthand or separate properties for border-width, border-style, and border-color.

Here's the syntax for the border property with shorthand notation:

border: <border-width> <border-style> <border-color>;

For example, you can set a 2-pixel solid red border with the following CSS rule:

border: 2px solid red;

The border-width specifies the width of the border, which can be set using different units like pixels (px), ems (em), or percentages (%). You can set individual values for each side of the element's border (top, right, bottom, left), or a single value to apply to all sides.

The border-style specifies the style of the border, which can be set to values like solid, dotted, dashed, double, groove, ridge, inset, outset, or none. Again, you can set individual values for each side or a single value for all sides.

The border-color specifies the color of the border. You can set the color using named colors (red, blue, etc.), hexadecimal values (#FF0000, #00F), RGB values (rgb(255, 0, 0)), or HSL values (hsl(0, 100%, 50%)). Similarly, you can set individual values for each side or a single value for all sides.

 

border-radius

The border-radius property is used to round the corners of an element's border. It allows you to create curved corners instead of sharp, right-angled corners. You can specify the radius using a length value or a percentage.

Here's an example that sets a border radius of 10 pixels on all corners of an element:

border-radius: 10px;

Alternatively, you can specify different radii for each corner using the border-radius shorthand or individual properties for each corner (border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius).

For example, to set a larger radius on the top-left corner and a smaller radius on the bottom-right corner, you can use the following CSS rule:

border-radius: 20px 0 0 10px;

 

 

 

 

box-sizing

In CSS, the box-sizing property is used to control how the total width and height of an element is calculated, including its content, padding, and border. It determines whether these dimensions include or exclude the padding and border.

The box-sizing property accepts two values:

1. content-box (default): This is the default value and follows the traditional box model. It calculates the width and height of an element excluding the padding and border. The total width of the element is equal to the sum of the content width and any specified margins.
2. border-box: This value includes the padding and border within the specified width and height of an element. The total width of the element is equal to the sum of the content width, padding, border, and any specified margins.

https://planflow.dev/blog/what-is-box-sizing-in-css-how-does-it-work

 

overflow

A shorthand property that controls the display when content overflows beyond the size of the element.

- visible: shows the overflowed content as it is
-hidden: cut off overflowing content
- auto : cut only when there is overflowing content and create a scrollbar