Question

Simply set the border to red and borderwidth=1px. Using the F12 viewer I can see the CSS has been applied and it should be rendering all four borders, but only the bottom and right borders are visible. changing the border to 2px makes it visible.

How can I fix it so today’s date has a border around it?

Code is inline since the calendar control is fail and doesn’t apply CSS half the time properly:

<asp:Calendar runat="server" ID="calendarBooking" BorderStyle="None" 
        BackColor="White" OnLoad="Calendar_Load"
        ondayrender="calendarBooking_DayRender">
    <DayHeaderStyle BackColor="#98c4eb" ForeColor="#ffffff"
    Width="30px" Height="30px"
    BorderStyle="None"
    />

    <DayStyle BackColor="#ffffff"
    ForeColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    BorderColor="#cccccc"
    Width="30px"
    Height="30px"


    />

    <TitleStyle BorderStyle="None" BackColor="#ffffff" />

    <NextPrevStyle BorderStyle="None" />

    <TodayDayStyle BorderColor="Red"/>

    <SelectedDayStyle BackColor="#FF6A00"/>

    </asp:Calendar>

Answer 1

The problem is coming from the table output by .NET – it contains this style definition:

border-collapse:collapse;

By disabling this rule (using Firefox with Firebug) the border displays correctly for “Today” – of course, this means that every cell has a border, so you have two 1px borders next to each other, which makes all of the cells appear to have a 2px border, which probably isn’t what you want.

Another possible solution is to adjust the anchor instead – like this:

<TodayDayStyle CssClass="today"/>

With this css rule:

td.today a
       {
        border: 1px solid Red;
        display: block;
        width: auto;
        height: 24px;
        padding: 4px 0 0 0;
       }

Again, this isn’t perfect as the red-border appears INSIDE the existing gray border.

Another solution would be to use a highlighted background instead…

<TodayDayStyle BackColor="Red" ForeColor="White"/>

The problem you have when trying to solve this is that you can’t control the HTML being generated for the calendar – it’s being invented magically by the calendar control – so all the proper fixed you’d normally do in HTML and CSS aren’t necessarily available. I hope one of these suggestions helps though.

UPDATE: If you want to put the red border right next to the gray border with no gap, you can change your css rules as follows:

td.today 
{
     padding: 0;
}

td.today a
{
    border: 1px solid Red;
    display: block;
    width: auto;
    height: 24px;
    padding: 3px 0 0px 0;
}