Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided:

<!doctype html>
<html>
<head>
<title>Website</title>
</head>
<body>
 <style>
 a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family:tahoma;
    background:black;
    padding-top:2px;
    padding-right:0px;
    padding-bottom:3px;
    padding-left:0px;
    border:1px solid red;
    margin-left:0px;}
 </style>
 <a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a>
 </body>
 </html>
htmlcss

Answer №1

To apply individual border styles to each a element, you can use the following CSS:

a{
    text-decoration:none;
    color:black;
    font-weight:bold;
    font-family:arial;
    background:white;
    padding-top:3px;
    padding-right:8px;
    padding-bottom:4px;
    padding-left:2px;
    border-bottom: 1px solid blue;
    border-top: 1px solid blue;
    margin-left:5px;
}

a:last-child{
    border-right:solid 1px blue;
}

a:first-child{       
    border-left:solid 1px blue;
}

Try it out on fiddle!

Answer №2

Feel free to experiment with the code provided below:

Live Demo

Another Demo

<div style="border:1px solid green;">
  <a href="https://www.yahoo.com">Yahoo</a>
  <a href="https://www.yahoo.com">Yahoo</a>
  <a href="https://www.yahoo.com">Yahoo</a>
  <a href="https://www.yahoo.com">Yahoo</a>
  <a href="https://www.yahoo.com">Yahoo</a>
<div>

Answer №3

Using border-color in your CSS can enhance the visual appeal of your design.

Check out this JSFiddle for an example

Here's a snippet of the code:

.link {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-family: tahoma;
    background: black;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;    
    margin-left: 0px; 
    border-color: red;
}

Answer №4

To achieve a clean look, consider using pseudo classes to remove the left and right borders from element a.

a {
    border-right:none;
    border-left:none;
}
a:last-child {
    border-right: 1px solid blue;
}
a:first-child {
    border-left: 1px solid blue;
}

Check out this demo for reference

Answer №5

Enclose your anchor tags within a div and apply a border to the div.

<div id="wrap">
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
</div>

Set display:inline-block; so that the width matches the anchor tags.

Take a look at this fiddle

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

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss

Identify Horizontal Swipe Gestures on Page-level

I am currently focused on ensuring accessibility for users utilizing voiceover technology. While navigating their phone, these individuals rely on right and left swipes to interact with elements on a page. I am seeking to implement swipe detection at the ...

javascripthtmlreactjsaccessibilitywai-aria

The importance of precision in a written text

When it comes to being specific, I usually pride myself on my skills. However, there's one particular challenge that I can't seem to crack. Here's the scenario: Imagine you have a list structured like this: <ul class="dates"> < ...

csscss-selectorscss-specificity

Elements appearing distorted in Firefox and Internet Explorer

I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages. While it displays perfectly on Chrome, it appear ...

htmlcssresponsive-designcross-browsercss-position

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Is there a way to display long string data from a JSON file in a list format when the description string is too lengthy? How can I split or format the description using React and TypeScript? The JSON data I have is as follows: "options": [ ...

htmlreactjsregextypescriptreact-redux

Creating text input without borders using HTML and CSS

I have managed to create text inputs without borders using HTML and CSS, but I am facing an issue. Whenever I click on the input field, a yellow border appears instead of the one I removed. It seems like this is coming from the default stylesheets, and I&a ...

htmlcsstextborderless

Ways to display a different div when clicking on a div?

Good afternoon, I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue. My problem involves a div with the class .title3. I want another div with the class .Content ...

javascriptjqueryhtmlcss

How can I submit a form using ajax and retrieve the data as an array?

Hey there, I need some help on how to submit a form and receive data in the form of an array like this: { "notes":'some notes', "validUntil": '12/12/2015', "status": 1, "menuItemName": "HR Section", "menuItemDesc": "gggg" } Here is th ...

javascriptjqueryhtmlajax

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

htmlrubyxmljekylljekyll-bootstrap

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

djangonode.jshtmlvideo

`Issues with CSS/JQuery menu functionality experienced in Firefox`

After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46). The problem arises when toggling the overlay using the "MENU" butt ...

javascriptjqueryhtmlcssfirefox

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

javascriptjqueryhtmlajax

How can I prevent a CSS class from being rendered in a specific view within MVC?

My knowledge of CSS is quite limited and I am fairly new to it. In my MVC application, I am using a theme that relies on Bootstrap. In the _layout view of my application, I have the following code: <div class="container body-content"> @Html.Par ...

htmlcssasp.net-mvc

Determining the margin-left value of a centrally positioned table

I have a table with variable columns, meaning the columns of the table are dynamic. The number of columns will keep changing, causing the table to be centralized and the margin-left value to adjust accordingly. Now, I need to calculate the margin-left val ...

jquerycssruby-on-railstabularwicked-pdf

Stacking issue - elements not properly aligned

Is there a way to move my H1 text below the blue category button instead of beside it? Thank you in advance! http://jsfiddle.net/TDBzN/ <div id="article" class="animated2 fadeInLeftBig"> <div class="article-close"></div> <div c ...

htmlcss

Display div - conceal div - pause for 15 minutes - continue the cycle

I have a challenging JavaScript task that I've been struggling with for quite some time. The goal is to display a div for 5 seconds, hide it, wait for 15 minutes, then show it again for another 5 seconds, and continue this process in an infinite loop. ...

javascriptjqueryhtmlhideshow