Question 45818 in CSS Question posted in
Some basic documentation can be found here.

How to round this image logo using CSS,

I’ve applied this code to my image, but it doesn’t turn to a Rounded shape,

.navbar {
  display: flex;
}

.nav-list {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  height: 41px;
  margin: 3px 5px;
  border-radius: 35px;
  border: 2px solid white;
}
<!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="stye.css">
</head>

<body>
  <nav class="navbar background">
    <ul class="nav-list">
      <div class="logo"><img src="https://via.placeholder.com/100x70" alt="logo"></div>
      <li>
        <a href="#home"></a>Home</li>
      <li>
        <a href="#about"></a>About</li>
      <li>
        <a href="#services"></a>Services</li>
      <li>
        <a href="#contact-Us"></a>Contact Us</li>
    </ul>
    <div class="right-nav">
      <input type="text" name="search" id="search">
      <button class="btn btn-sm">Search</button>
    </div>
  </nav>
</body>

</html>

enter image description here

I’ve tried this code too:

width:23% (of the parent element)
border-radius:35px;

I’ve tried 1:1 ratio but it damaged the picture quality.

Tags:

2

Answers


  1. 0

    if you have a element thats not a 1:1 ratio you will not get a ‘perfect’ circle. try making the height and width the same if that is what you want.

    Login or Signup to reply.
  2. 0

    based on your first set of code, you need to add:

    width: 41px;

    that should make your border a circle

    this does mess up your image and you could use object-fit: cover;
    this code keeps the image its aspect ratio and fills the given dimension

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search