Answer to Question #315359 in HTML/JavaScript Web Application for siva

Question

Answer to Question #315359 in HTML/JavaScript Web Application for siva

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #315359

CSS Border Properties

The goal of this coding exam is to quickly get you off the ground with the CSS Border Properties.

Use the below reference image.

https://res.cloudinary.com/dfxicv9iv/image/upload/v1619085330/css-border-properties-output_a4ucou.png

Achieve the design by using CSS border

border-* properties. The * indicates the direction.Apply the border shorthand property with the width

5px, style solid, and hex color code #184b73 to the HTML button element with the class name border-shorthandResources

CSS Colors used:

#184b73

#ffffff

HTML code:

<body>

<button class="button border-shorthand">border shorthand</button>

<button class="button border-top-none">border top none</button>

<button class="button border-bottom-none">border bottom none</button>

</div>

</body>

Expert's answer

<!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">
   <link rel="stylesheet" href="style.css">
   <title>CSS Border Properties</title>
</head>
<body>
   <style>
      .d-flex{
         display: inline-flex;
      }


      .flex-column{
         flex-direction: column;
      }
      .button{
         margin-bottom: 20px;
         background: #fff;
         color: #184b73;
         border-color: #184b73;
         padding: 4px 20px;
      }
      .border-shorthand{
         border: #184b73 solid 5px;
      }
      .border-top-none{
         border-top: none;
      }
      .border-bottom-none{
         border-bottom: none;
      }
      .border-left-none{
         border-left: none;
      }
      .border-right-none{
         border-right: none;
      }
   </style>
   <div class="d-flex flex-column">
      <button class="button border-shorthand">border shorthand</button>
      <button class="button border-top-none">border top none</button>
      <button class="button border-bottom-none">border bottom none</button>
      <button class="button border-left-none">border left none</button>
      <button class="button border-right-none">border right none</button>
   </div>
   <script src="js/script.js"></script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #315359 in HTML/JavaScript Web Application for siva

5px, style solid, and hex color code #184b73 to the HTML button element with the class name border-shorthandResources

Comments

Leave a comment

Related Questions