Versatile Border Curvature

I am struggling with applying border radius to anchor tags in a way that they appear inside a circular shape. I want the shape to be flexible based on the width of the text within the tag. Any suggestions or guidance would be greatly appreciated. Here is a link to my fiddle.

Does anyone know how I can achieve this effect?

<a href="http://google.com">abc</a>
<a href="http://en.wikipedia.org/">abcdefgh</a>

CSS:

a{
    border:1px solid black;
    padding:10px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

Answer №1

Radius can be specified in percentage.

CSS:

a{
    border:1px solid black;
    padding:10px;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;
}

Check out the Updated fiddle here

It may not be possible to achieve a perfect circle around an anchor with border radius due to variations in anchor text size.

Update:

You can create a circle using div by specifying width and height: DEMO

Here is another example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The grid image is refusing to fall into formation

I have been attempting to align the image in section-1 to the right side, but for some reason, it's not cooperating. I initially tried using flex-box, but I want the image to remain fixed on the right side of the screen without any movement. Floats ca ...

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Here is the HTML code below: <Div id="one"> <Div id="two"> </Div> </Div> When trying to access div "two" using "document.getElementById("two")", it returns null. ...

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

Using a for loop within a ul tag in HTML

If I needed to display the numbers 0 to 4 on an HTML page, how should I modify this code snippet to achieve that? <ul> {% for i in range(5) %} <li><a>i</a></li> {% endfor %} </ul> ...

Tracking User Visits in Codeigniter

Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...

PHP create hyperlink only if it has not been already linked

Could someone help me with a question that is similar to this one: How to Emulate StackOverflow Auto-Link Behavior Nevertheless, I am facing an issue with mixed content containing links. URLs that are already within A tags <a href="http://stackoverflo ...

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

Do you need to align images side by side and have clickable images positioned beneath each one?

After searching high and low, I couldn't find a similar question. My goal is to transform this from a vertical layout to a horizontal one: https://i.stack.imgur.com/4kZNM.png Check out the code snippet below: ghost<br class="newline"> <img ...

Using hover to show a block from a sibling parent step-by-step tutorial

My ScSS task involves displaying the block with the parent2 class when hovering over child 1 of the block with the parent1 class. <div classname="main"> <div className="parent1"> <span> Child 1 ...

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

Is there a way for me to create a sidebar that is scrollable, like the one on www.youtube

Hey there! I'm looking to incorporate a feature on my website that resembles the layout of https://www.youtube.com/. More precisely, I want to have a sidebar on the left side displaying playlists, subscriptions, and other options. However, I don' ...

The transparency of my navbar renders it elegant, yet I desire to imbue the toggle background with a vibrant hue

I'm facing an issue with the transparent Navbar I built in Bootstrap 5. On mobile toggle view, the navigation links are getting lost within the text of the hero image. To resolve this, I want to keep the main navigation bar transparent and change the ...

Can text be replaced without using a selector?

I am utilizing a JavaScript library to change markdown into HTML code. If I insert <span id="printHello></span> within the markdown content, I can still access it using getElementById() after conversion. However, there is one scenario where th ...

Showcasing particular id or class within a different id upon clicking a link

These are the links I have available: <a href="#home">Home</a> <a href="#about">About</a> <a href="#portofolio">Portfolio</a> <a href="#contact">Contact</a> I would like the user to click on any of these l ...

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

Error occurs when checkboxes are left unchecked in CherryPy web form

Currently, I am in the process of creating a straightforward web form using CherryPy in Python 3.5 to interact with an sqlite3 database, which requires input of various data types. I encountered an issue where leaving checkboxes unchecked resulted in an er ...

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Hello there, I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on. Currently, I have an image displayed in an HTML page like this: <div id="tag_sunrise_sunset"><p ...

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

What is the best way to split a div diagonally while keeping the border unchanged?

I'm attempting to devise the design displayed in the link below: https://i.sstatic.net/n0ZbB.png I have experimented with the following code: .App { font-family: sans-serif; text-align: center; } #container { height: 300px; width: 300p ...