ARTICLE AD BOX
Original code found here. I can't get this to round the corners.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> <style> .modal { z-index: 10; display: block; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5) } .modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; max-width: 600px } .modal-inner { padding: 20px 30px; } .modal-close { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; right: 0; top: 0; background: #ccc; padding: 6px 10px; } .animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}} </style> </head> <body> <div id="modal-1" class="modal animate-opacity"> <div class="modal-content"> <div class="modal-inner"> <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">×</span> <h4>Modal Headline</h4> <p>Modal description goes here.</p> </div> </div> </div> </body> </html>and code with the rounded parts (one in .modal and one in .modal-content).
In .modal:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> <style> .modal { z-index: 10; display: block; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; border: 5px white; border-radius: 5px; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5) } .modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; max-width: 600px } .modal-inner { padding: 20px 30px; } .modal-close { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; right: 0; top: 0; background: #ccc; padding: 6px 10px; } .animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}} </style> </head> <body> <div id="modal-1" class="modal animate-opacity"> <div class="modal-content"> <div class="modal-inner"> <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">×</span> <h4>Modal Headline</h4> <p>Modal description goes here.</p> </div> </div> </div> </body> </html>In .modal-content:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> <style> .modal { z-index: 10; display: block; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5) } .modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; max-width: 600px border: 5px white; border-radius: 5px; } .modal-inner { padding: 20px 30px; } .modal-close { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; right: 0; top: 0; background: #ccc; padding: 6px 10px; } .animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}} </style> </head> <body> <div id="modal-1" class="modal animate-opacity"> <div class="modal-content"> <div class="modal-inner"> <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">×</span> <h4>Modal Headline</h4> <p>Modal description goes here.</p> </div> </div> </div> </body> </html>Should I be putting the border radius elsewhere?
![How to stop Elementor Pro marquee from pausing on hover? [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)