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

How to draw a circle without using border-radius property CSS?

I am trying to make a circular icon, and I noticed that the border radius doesn’t work properly in Safari. Here is what the icon looks like:

As you can see, the icon edge in Safari is getting rounded for some reason. I tried the other solution mentioned on StackOverflow but it still doesn’t work.
Is border-radius the only way to make a circular figure? Can you make a circle without the border-radius?

.fa-file-lines{
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 26px;
    margin-left: 69px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="sampleIcon">
    <i class="fa-solid fa-file-lines"></i>
</div>
Tags:

2

Answers


  1. 0

    Unfortunately I don’t have Safari, so I can’t test this, but looking at your code it seems like you are applying the border-radius to the icon instead of the black frame/container. Maybe that’s the reason Safari is chopping its edges (I have no clue why it works in Firefox).

    Try applying the border style to the container like this:

    .fa-file-lines {
  color: white;
  font-size: 2em; /* This is a random number, just set the size you want*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sampleIcon {
  width: 4em; /* This is a random number, just set the size you want*/
  height: 4em; /* This is a random number, just set the size you want*/
  background-color: black;
  border-radius: 50%;
  position: relative;
}
    <head>
<script src="https://kit.fontawesome.com/b608acffe1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="sampleIcon">
  <i class="fa-solid fa-file-lines"></i>
</div>
<body>
    Login or Signup to reply.
  2. 0

    you’re experiencing with the border radius not working properly in Safari could be related to the padding property that you’ve applied to the icon.

    <div class="sampleIcon">
    <i class="fa-solid fa-file-lines"></i>
</div>

.sampleIcon {
    display: inline-block; /* Set to inline-block to contain the icon */
    width: 88px;
    height: 88px;
    text-align: center; /* Center the icon horizontally and vertically */
    line-height: 88px; /* Vertically center the icon */
    border-radius: 50%;
    margin-left: 69px;
}

.fa-file-lines {
    font-size: 36px; /* Adjust the font size as needed */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search