title: Customize / Style a Desktop Notification
body: <p>I got a desktop notification using HTML5 up and running. However, the look and feel of the Desktop Notification seems too simple for my requirement.</p>
  
  <p>Basically, the Desktop notification, as of now is just a simple Text message with a white background on a rectangle.</p>
  
  <p>Below is the code i have used for displaying the Desktop notification:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Notification HTML5&lt;/title&gt;
  &lt;script&gt;
  function notifyMe() {
    // Let's check if the browser supports notifications
    if (!("Notification" in window)) {
      alert("This browser does not support desktop notification");
    }
  
    // Let's check if the user is okay to get some notification
    else if (Notification.permission === "granted") {
      // If it's okay let's create a notification
    var options = {
          body: "This is the body of the notification",
          //icon: "icon.jpg",
          dir : "ltr"
      };
    var notification = new Notification("Hi there",options);
    notification.onclick = function () {
      //console.log("this:"+this);
        //window.open("https://stackoverflow.com/");
        Maximize();
      };
    }
  
    // Otherwise, we need to ask the user for permission
    // Note, Chrome does not implement the permission static property
    // So we have to check for NOT 'denied' instead of 'default'
    else if (Notification.permission !== 'denied') {
      Notification.requestPermission(function (permission) {
        // Whatever the user answers, we make sure we store the information
        if (!('permission' in Notification)) {
          Notification.permission = permission;
        }
  
        // If the user is okay, let's create a notification
        if (permission === "granted") {
          var options = {
                body: "This is the body of the notification",
                //icon: "icon.jpg",
                dir : "ltr"
            };
          var notification = new Notification("Hi there",options);
        }
      });
    }
  
    // At last, if the user already denied any notification, and you
    // want to be respectful there is no need to bother them any more.
  }
  function Maximize() 
  {
  window.innerWidth = screen.width;
  window.innerHeight = screen.height;
  window.screenX = 0;
  window.screenY = 0;
  alwaysLowered = false;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button onclick="notifyMe()" style="height: 80px;width: 311px;color:white;font-size: 24px;background: cadetblue;border: none;cursor: pointer;"&gt;Show me notification&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Below is the image illustrating the way in which the Desktop notification is rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/Qw14T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Qw14T.png" alt="enter image description here"></a></p>
  
  <p>So my query is:</p>
  
  <p>Is it possible to apply some styling to the appearance of the Desktop notification? Like displaying the font in Bold and italics and in a different colour and changing the background color of the Notification and may be rounding the corners of the rectangular Notification pop-up?</p>
  
  <p>What i tried:</p>
  
  <p>I learnt that previously we did have a way of doing this. That is by using the API <code>createHTMLNotification()</code>, but now the same has been deprecated. Also, i tried finding alternatives for the same <a href="https://stackoverflow.com/questions/16764882/createhtmlnotification-replacement">Replacement for createHTMLNotification</a>, but it lack's clarity.</p>