From 0e6c1d4df9bec54f7a61047dfeb9209a931bdaf7 Mon Sep 17 00:00:00 2001 From: ambarytl <44284655+ambarytl@users.noreply.github.com> Date: Tue, 20 Nov 2018 19:12:15 +0530 Subject: [PATCH] Added an article in place of stub. (#22294) --- .../add-borders-around-your-elements/index.md | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/guide/english/certifications/responsive-web-design/basic-css/add-borders-around-your-elements/index.md b/guide/english/certifications/responsive-web-design/basic-css/add-borders-around-your-elements/index.md index 5e9cebb622..92d9beab8f 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/add-borders-around-your-elements/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/add-borders-around-your-elements/index.md @@ -2,15 +2,26 @@ title: Add Borders Around Your Elements --- ## Add Borders Around Your Elements - -We need to create a class called ```thick-green-border```. This class should add a 10px, solid, green border around an HTML element. and after, we need to apply the class to your cat photo. +## Hint +To add a custom border around any HTML element, these three properties are used as shown below. + +```css +.className { + border-width: 10px; /*sets the width/thickness of border to 10 pixels*/ + border-color: pink; /*sets the color of the border to pink*/ + border-style: solid; /*sets the style of the border to solid line type*/ + } +``` + +The same className should be used as the value for class attribute of the HTML element which has to be styled. Good Luck! ## Solution: +We need to create a class called `thick-green-border`. This class should add a 10px, solid, green border around an HTML element. and after, we need to apply the class to your cat photo. -We add between `````` new class ```thick-green-border``` with properties: +We add between `` new class `thick-green-border` with properties: -```js +```css .thick-green-border { border-color: green; border-width: 10px; @@ -19,14 +30,14 @@ We add between `````` new class ```thick-green-border` ``` Also, we can add properties this way: -```js +```css .thick-green-border { border: 10px solid green; } ``` The final stage is adding this class to image: -```js +```html A cute orange cat lying on its back.