Code
<!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"> <title>Box - Radius</title> <style> #box { border: 2px solid blue; width: 400px; /* padding: 25px; */ /* border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; */ /* border-radius: 30px 100px; */ border-radius: 100%; } #circle { border: 2px solid brown; width: 150px; height: 150px; border-radius: 50%; background-color: blueviolet; outline: 3px solid blue; outline-offset: 8px; } </style> </head> <body> <h1> Yahoo Baba Box Radius </h1> <div id="box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque iusto soluta esse quis omnis? Debitis a fugit dicta natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque iusto soluta esse quis omnis? Debitis a fugit dicta natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque iusto soluta esse quis omnis? Debitis a fugit dicta natus. </div> <div id="circle"> </div> </body> <script> let circle = document.getElementById("circle"); circle.contentEditable = true; </script> </html> Output
Top comments (0)