diff --git a/guide/english/css/borders/index.md b/guide/english/css/borders/index.md index 8ab65d0a82f..3b5d333c76e 100644 --- a/guide/english/css/borders/index.md +++ b/guide/english/css/borders/index.md @@ -6,31 +6,29 @@ title: Border Property CSS Border ---- -Our personal favorite CSS attribute, allows you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders lets you create crisp and customized border styles with very little work, compared to the antiquated methods of HTML. +The CSS property `border` allows complete customization of the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, with the exception of tables. CSS Borders let you create crisp, custom border styles with very little work compared to antiquated HTML methods. -The `border` shorthand property sets all the border properties in one declaration. +The `border` shorthand property sets all border properties in one declaration. ```css border: 1px solid #000; ``` -The properties that can be set, are (in order): +The properties that can be set are (in order): 1. `border-style` 2. `border-width` 3. `border-color` 4. `border-radius` -It does not matter if one of the values above are missing, for example: +It does not matter if one of the values above is missing. For example, the following is valid CSS: ```css border: solid red; ``` -The above code is also valid CSS. ### Border Styles -The `border-style` property sets a wide range of different types of borders. +The `border-style` property can be set to a wide range of different border types: -The various values are: - `dotted` - Sets a dotted border. - `dashed` - Sets a dashed border. - `solid` - Sets a solid border. @@ -42,8 +40,9 @@ The various values are: - `none` - Sets no border. - `hidden` - Sets a hidden border. -Based on the property you choose, these styles can be mismatched. -You can style each side seperately: +Each side of the border doesn't need to match. + +Each side can be styled separately: ```css border-top-style: solid; border-left-style: dotted; @@ -51,17 +50,16 @@ You can style each side seperately: border-bottom-style: double; ``` -Or you can style them all at once: +Or they can all be styled at once: ```css border-style: solid dashed double dotted; ``` -As shown, the border property allows you to select different sections of it. [top, bottom, left, right] +The border property allows you to select each side of the element in one declaration in the following order: top, bottom, left, right. ### Border Width -To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must -define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined -values: thin, medium, or thick. +To alter the thickness of a border, use the `border-width` attribute. You may use key terms or exact values to define the border width. +Note: You must define a `border-style` for the border to appear. The `width` can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: `thin`, `medium`, or `thick`. Example: ```css @@ -83,8 +81,8 @@ p { ### Border Color -Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout -of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types. +Now for the creative aspect of CSS Borders! With the use of the `border-color` property, you will be able to create customized borders to fit the flow and layout +of your website. Border colors can be any color defined by RGB, HSL, hexadecimal, or key terms. Example: ```css @@ -107,19 +105,31 @@ p { ``` ### Border-Radius -The `border-radius` property allows the corners of a border to be rounded. This is done by providing a size for -how much the border is to be rounded. Size can be in px or %. + +The `border-radius` property allows the corners of a border to be rounded. `border-radius` takes a length as its value which determines the degree of curvature for each corner of the element. The length can be in px or %. ```css border-radius: 25px; ``` -Each corner of `border-radius` can be adjusted. The order is top, bottom, left, right. +Each corner of `border-radius` can be adjusted individually in the following order: top, bottom, left, right. ```css border-radius: 15% 10px 30% 5px; ``` +### Border-Image + +The `border-image` property allows you to use an image as a custom border style. `border-image` is a shorthand for `border-image-source`, `border-image-width`, `border-image-outset`, and `border-image-repeat`. + +`border-image-source` takes the url of the image you'd like to set as the border. + +`border-image-width` sets the width of the image. + +`border-image-outset`sets the distance between the element and the border image. + +`border-image-repeat` adjusts the way border images adjust to the element's edges. + ### Border: All in One -While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code. +While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it's easier and less of a headache to create a uniform border in single line of CSS code. The `border` shorthand property allows us to declare a width, style, color, and radius. Example: ```css @@ -135,9 +145,4 @@ h5 { border: dotted; } - [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/border) - [CSS3 Border Radius](https://guide.freecodecamp.org/css/css3-borders-rounded-corners) -### Other Border Attributes -- 'border-radius' - This can set radius of the border. -- 'border-spacing' - This can set spacing between the text and border. -- 'border-image' - This sets an image as border. - Browser Support: IE6+