Complited box model in css

docs/css/box-model/border-radius.md

@@ -0,0 +1,140 @@
+---
+id: border-radius
+title: CSS Border Radius
+sidebar_label: Border Radius
+sidebar_position: 10
+keywords:
+  [
+    css border radius,
+    border radius property,
+    css border radius property,
+    css rounded corners,
+    css border radius values,
+    css border radius shorthand,
+  ]
+description: Learn how to use the CSS border-radius property to create rounded corners for elements in your web page layout.
+tags: [css, border radius, css border radius, border radius property, css border radius property]
+---
+
+In CSS, the `border-radius` property is used to create rounded corners for elements in your web page layout. Rounded corners soften the appearance of elements and can make your web page design more visually appealing. By adjusting the `border-radius` values, you can control the curvature of the corners and create different styles for your elements.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `border-radius` property is as follows:
+
+```css title="index.css"
+selector {
+  border-radius: value;
+}
+```
+
+- `selector`: The element to which the border radius is applied.
+- `border-radius`: The CSS property used to set the curvature of the corners of an element.
+- `value`: Specifies the border radius values for the top-left, top-right, bottom-right, and bottom-left corners of the element. It can take one of the following forms:
+  - `<length>`: Specifies a fixed radius value in pixels (e.g., `10px`).
+  - `<percentage>`: Specifies the radius value as a percentage of the width or height of the element.
+  - `initial`: Sets the border radius to its default value.
+  - `inherit`: Inherits the border radius value from the parent element.
+  - `unset`: Resets the border radius to its inherited value if it inherits from its parent, or to its initial value if not.
+  - `none`: Specifies that no border radius is applied to the element.
+  - `initial`: Sets the border radius to its default value.
+  - `inherit`: Inherits the border radius value from the parent element.
+  - `unset`: Resets the border radius to its inherited value if it inherits from its parent, or to its initial value if not.
+- `<length>` or `<percentage>` values can be specified for each corner individually in the following order:
+  - `border-radius: top-left top-right bottom-right bottom-left;`
+  - `border-radius: top-left/top-right bottom-right/bottom-left;`
+  - `border-radius: top-left/top-right/bottom-right/bottom-left;`
+  - `border-radius: top-left top-right/bottom-right bottom-left;`
+
+The default value of the `border-radius` property is `0`, which means the corners are square and have no curvature.
+
+## Example
+
+In the following example, the `border-radius` property is used to create a `<div>` element with rounded corners:
+
+```css title="index.css"
+div {
+  border-radius: 10px;
+}
+```
+
+In this example, the `border-radius` property sets the curvature of all four corners of the `<div>` element to `10px`, creating a rounded appearance for the element. You can adjust the `border-radius` value to create different levels of curvature for the corners of your elements.
+
+```html title="index.html"
+<div></div>
+```
+
+In the HTML code above, the CSS rule will apply the specified `border-radius` value to the `<div>` element, resulting in rounded corners for the element.
+
+By using the `border-radius` property, you can create visually appealing designs with rounded corners for elements in your web page layout. Rounded corners can help soften the appearance of elements and add a touch of elegance to your web page design.
+
+<AdsComponent />
+
+:::note Try it yourself
+Experiment with different values of the `border-radius` property to see how the curvature of the corners changes based on the specified radius values.
+:::
+
+## Example for `border-radius` Property
+
+In the following example, the `border-radius` property is used to create a `<div>` element with rounded corners:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rounded Corners</title>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div>
+    <p>This is a div with rounded corners.</p>
+  </div>    
+</body>
+```
+
+  </TabItem>
+  <TabItem value="CSS" label="index.css">
+
+```css
+div {
+  border-radius: 10px;
+  background-color: lightblue;
+  padding: 20px;
+}
+```
+
+    </TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000", padding: "0" }} minHeight="200px">
+    <div style={{borderRadius: "10px", backgroundColor: "lightblue", padding: "20px"}}>
+        <p>
+            This is a div with rounded corners.
+        </p>
+    </div>
+</BrowserWindow>
+
+In this example, the `border-radius` property is used to create rounded corners for the `<div>` element, giving it a softer appearance. The `border-radius` value of `10px` sets the curvature of the corners, creating a rounded effect for the element.
+
+By adjusting the `border-radius` value, you can control the level of curvature for the corners of elements in your web page layout. This allows you to customize the appearance of elements and create visually appealing designs with rounded corners.
+
+:::info Try it yourself
+
+You can experiment with different `border-radius` values to create various styles of rounded corners for elements in your web page layout. Try changing the `border-radius` value in the example above to see how it affects the curvature of the corners of the `<div>` element.
+:::
+
+By following this example, you can use the `border-radius` property to create rounded corners for elements in your web page layout. Rounded corners can enhance the visual appeal of your design and add a touch of elegance to your web page elements.
+
+## Conclusion
+
+The `border-radius` property in CSS allows you to create rounded corners for elements in your web page layout. By setting the curvature of the corners using the `border-radius` property, you can soften the appearance of elements and create visually appealing designs with rounded corners. Experiment with different `border-radius` values to customize the curvature of the corners and create unique styles for your web page elements.

docs/css/box-model/border.md

@@ -0,0 +1,136 @@
+---
+id: border
+title: CSS Border
+sidebar_label: Border
+sidebar_position: 9
+keywords:
+  [
+    css border,
+    border property,
+    css border property,
+    css border styles,
+    css border width,
+    css border color,
+    css border shorthand,
+    border values,
+  ]
+description: Learn how to use the CSS border property to create borders around elements in your web page layout.
+tags: [css, border, css border, border property, css border property]
+---
+
+In CSS, the `border` property is used to create borders around elements in your web page layout. Borders are the lines that surround the content of an element and separate it from other elements on the page. By adjusting the border properties, you can control the appearance, style, width, and color of the borders to create visually appealing layouts.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `border` property is as follows:
+
+```css title="index.css"
+selector {
+  border: value;
+}
+```
+
+- `selector`: The element to which the border is applied.
+- `border`: The CSS property used to set the border around an element.
+- `value`: Specifies the border values for the style, width, and color of the border. It can take one of the following forms:
+  - `<border-style>`: Specifies the style of the border (e.g., `solid`, `dashed`, `dotted`, `double`, etc.).
+  - `<border-width>`: Specifies the width of the border in pixels, em, rem, etc.
+  - `<border-color>`: Specifies the color of the border using a color name, hex code, RGB value, etc.
+  - `initial`: Sets the border to its default value.
+  - `inherit`: Inherits the border value from the parent element.
+  - `unset`: Resets the border to its inherited value if it inherits from its parent, or to its initial value if not.
+
+The `border` property can be set using one of the following shorthand values:
+
+- `border: value;`: Sets the same border style, width, and color for all four sides.
+- `border: width style color;`: Sets the border width, style, and color for all four sides.
+- `border: initial;`: Sets the border to its default value.
+- `border: inherit;`: Inherits the border value from the parent element.
+- `border: unset;`: Resets the border to its inherited value if it inherits from its parent, or to its initial value if not.
+- `border-top: value;`: Sets the border style, width, and color for the top side.
+- `border-right: value;`: Sets the border style, width, and color for the right side.
+- `border-bottom: value;`: Sets the border style, width, and color for the bottom side.
+- `border-left: value;`: Sets the border style, width, and color for the left side.
+- `border-width: value;`: Sets the border width for all four sides.
+- `border-style: value;`: Sets the border style for all four sides.
+- `border-color: value;`: Sets the border color for all four sides.
+
+The default value of the `border` property is `none`, which means no border is applied to the element.
+
+## Example
+
+In the following example, the `border` property is used to set a solid border around a `<div>` element with a width of `2px` and a color of `red`:
+
+```css title="index.css"
+div {
+  border: 2px solid red;
+}
+```
+
+In this example, the border around the `<div>` element will have a solid style, a width of `2px`, and a color of `red`. You can customize the border style, width, and color to achieve the desired visual effect for your web page layout.
+
+<AdsComponent />
+
+:::note Note
+The `border` property can be combined with other border-related properties such as `border-radius` to create more complex border effects like rounded corners.
+:::
+
+## Example for border property
+
+### Example 1: Setting Border Style, Width, and Color
+
+In this example, we set the border style to `dashed`, the width to `3px`, and the color to `blue` for a `<div>` element:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSS Border Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div>
+    <p>This is a div element with a dashed border.</p>
+  </div>
+</body>
+</html>
+```
+
+  </TabItem>
+  <TabItem value="CSS" label="styles.css">
+
+```css title="styles.css"
+div {
+  border: 3px dashed blue;
+}
+```
+
+  </TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
+    <div style={{border: "3px dashed blue"}}>
+        <p>
+            This is a div element with a dashed border.
+        </p>
+    </div>
+</BrowserWindow>
+
+By following this example, you can use the `border` property to create borders around elements in your web page layout. Adjusting the border style, width, and color allows you to customize the appearance of the borders to match your design requirements.
+
+:::info try it yourself
+You can experiment with different border styles, widths, and colors to create unique border effects for your web page elements. Try changing the border properties in the example above to see how they affect the appearance of the border around the `<div>` element.
+:::
+
+## Conclusion
+
+The `border` property in CSS is a powerful tool for creating borders around elements in your web page layout. By setting the border style, width, and color, you can control the appearance of the borders and enhance the visual appeal of your web pages. Experiment with different border styles and colors to create unique designs that make your content stand out.