DEV Community

AKSH DESAI
AKSH DESAI

Posted on

CSS Border-Radius Tutorial

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>
Enter fullscreen mode Exit fullscreen mode

Output
Output

Thank You.
You can follow us on:
Youtube
Instagram

Top comments (0)